first commit
This commit is contained in:
Anakagung2009-bit
@@ -0,0 +1,319 @@
|
|||||||
|
## Overview
|
||||||
|
|
||||||
|
Resend looks like a developer tool with the typography of an editorial.
|
||||||
|
Every page opens on `{colors.canvas}` (`#000000`), and the loudest element on
|
||||||
|
the canvas is not a button or a brand stamp — it's a 96px Domaine Display
|
||||||
|
serif headline ("Email for developers", "Email reimagined") with the
|
||||||
|
`ss01 / ss04 / ss11` stylistic alternates engaged. That single typographic
|
||||||
|
decision sets the brand tone: confident, considered, slightly literary, and
|
||||||
|
priced on quality rather than novelty.
|
||||||
|
|
||||||
|
The supporting cast is technical. Body copy switches to **ABC Favorit** for
|
||||||
|
marketing prose and **Inter** for UI labels, while code blocks render in
|
||||||
|
**Geist Mono** inside `{component.code-window}` shells with hairline traffic-
|
||||||
|
light dots. Surface depth is built almost entirely from translucent white —
|
||||||
|
6% borders, 14% strong borders, 4% dividers — over a deep `{colors.surface-deep}`
|
||||||
|
layer that sits just below the canvas black. There are no gradients painted
|
||||||
|
across full bands, just **soft atmospheric glows** (orange, blue, green, red,
|
||||||
|
yellow) anchored at the top of select sections, all at low opacity.
|
||||||
|
|
||||||
|
Page rhythm cycles in a single dark register: hero stripe → atmospheric
|
||||||
|
section → code window section → email mockup section → pricing or feature
|
||||||
|
grid → black footer. The brand never warms to a light surface; even
|
||||||
|
secondary email mockups are rendered as compact white cards inside the dark
|
||||||
|
canvas, framed like print insets in a black-bordered magazine page.
|
||||||
|
|
||||||
|
**Key Characteristics:**
|
||||||
|
- Pure black canvas (`{colors.canvas}` — `#000000`) on every public page; off-white text (`{colors.ink}` — `#fcfdff`) carries the full read.
|
||||||
|
- A serif-led type system: **Domaine Display** at 76–96px for hero headlines, **ABC Favorit** for marketing body, **Inter** for UI, **Geist Mono** for code.
|
||||||
|
- Six accent glow colours used only as low-opacity atmospheric washes (`{colors.accent-orange}`, `{colors.accent-blue}`, `{colors.accent-green}`, `{colors.accent-red}`, `{colors.accent-yellow}`) — never as buttons or solid surfaces.
|
||||||
|
- Strict container vocabulary: `{rounded.lg}` (12px) for feature cards, code wells, and email mockups; `{rounded.md}` (8px) for buttons; `{rounded.full}` for pills and avatars.
|
||||||
|
- Translucent white borders (`{colors.hairline}` 6% / `{colors.hairline-strong}` 14%) replace shadows entirely — the system has no traditional drop-shadow elevation language.
|
||||||
|
- `{component.button-primary}` is a small white rectangle with black text — counterintuitive contrast that becomes the page's brightest pixel and works as a single visual anchor.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
### Brand & Accent
|
||||||
|
- **Primary White** (`{colors.primary}` — `#fcfdff`): the brand's de facto accent. Reserved for `{component.button-primary}` (white pill on black canvas), Domaine display headlines, and the active text colour. White is the loudest possible colour on this canvas — that's the signature.
|
||||||
|
- **Primary On** (`{colors.primary-on}` — `#000000`): label colour on top of `{colors.primary}` surfaces. Black text on white pill is the brand's CTA pattern.
|
||||||
|
- **Surface Light** (`{colors.surface-light}` — `#f1f7fe`): a subtle blue-tinted off-white used as the active/pressed state of `{component.button-primary}`.
|
||||||
|
|
||||||
|
### Surface
|
||||||
|
- **Canvas** (`{colors.canvas}` — `#000000`): the default page background. True black, never near-black.
|
||||||
|
- **Surface Card** (`{colors.surface-card}` — `#0a0a0c`): the standard inset card surface, just lighter than canvas to register a step up in elevation.
|
||||||
|
- **Surface Elevated** (`{colors.surface-elevated}` — `#101012`): a second elevation step used on featured pricing tiers and ghost button surfaces.
|
||||||
|
- **Surface Deep** (`{colors.surface-deep}` — `#06060a`): code window background — slightly cooler and darker than the canvas itself, suggesting depth via temperature.
|
||||||
|
- **Hairline** (`{colors.hairline}` — `rgba(255,255,255,0.06)`): the soft 1px translucent-white divider used between rows and around feature cards.
|
||||||
|
- **Hairline Strong** (`{colors.hairline-strong}` — `rgba(255,255,255,0.14)`): the structural 1px border on cards, code wells, and form inputs.
|
||||||
|
- **Divider Soft** (`{colors.divider-soft}` — `rgba(255,255,255,0.04)`): low-contrast dividers between footer columns.
|
||||||
|
|
||||||
|
### Text
|
||||||
|
- **Ink** (`{colors.ink}` — `#fcfdff`): primary text colour on the dark canvas. Faintly blue-cool to feel like printed paper rather than pure white pop.
|
||||||
|
- **Body** (`{colors.body}` — `rgba(252,253,255,0.86)`): long-form body text where pure ink would feel too sharp.
|
||||||
|
- **Charcoal** (`{colors.charcoal}` — `rgba(252,253,255,0.7)`): captions, secondary nav labels.
|
||||||
|
- **Mute** (`{colors.mute}` — `#a1a4a5`): supporting text and inactive labels.
|
||||||
|
- **Ash** (`{colors.ash}` — `#888e90`): tertiary text, footer copy.
|
||||||
|
- **Stone** (`{colors.stone}` — `#464a4d`): disabled foreground.
|
||||||
|
- **On-Light** (`{colors.on-light}` — `#000000`): label colour inside the rare email-mockup white cards.
|
||||||
|
- **On-Light Mute** (`{colors.on-light-mute}` — `rgba(0,0,51,0.7)`): secondary text inside email mockups.
|
||||||
|
|
||||||
|
### Semantic
|
||||||
|
- **Accent Orange** (`{colors.accent-orange}` — `#ff801f`) + glow (`{colors.accent-orange-glow}` — `rgba(255,89,0,0.22)`): atmospheric warm wash anchored to "Email reimagined" / customer story sections. Solid orange never appears as a button or surface — only the glow.
|
||||||
|
- **Accent Yellow** (`{colors.accent-yellow}` — `#ffc53d`): used in inline highlight strokes and "first-class developer experience" key callouts.
|
||||||
|
- **Accent Blue** (`{colors.accent-blue}` — `#3b9eff`) + glow (`{colors.accent-blue-glow}` — `rgba(0,117,255,0.34)`): inline link colour and the cool atmospheric wash on the "Integrate this weekend" section.
|
||||||
|
- **Accent Green** (`{colors.accent-green}` — `#11ff99`) + glow (`{colors.accent-green-glow}` — `rgba(34,255,153,0.18)`): success status dots and the "delivery confirmed" feature glow.
|
||||||
|
- **Accent Red** (`{colors.accent-red}` — `#ff2047`) + glow (`{colors.accent-red-glow}` — `rgba(255,32,71,0.34)`): inline error red and the "reach humans, not spam folders" attention wash.
|
||||||
|
- **Link** (`{colors.link}` — `#3b9eff`): inline link colour — same as accent blue.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
### Font Family
|
||||||
|
|
||||||
|
Resend ships a four-family stack:
|
||||||
|
|
||||||
|
- **Domaine Display** — proprietary editorial serif used exclusively for hero headlines at 76px+, with `ss01 / ss04 / ss11` stylistic sets engaged for a slightly tighter, more print-magazine look.
|
||||||
|
- **ABC Favorit** — proprietary humanist sans-serif used for marketing body copy, hero subtitles, and pill labels. Carries `ss01 / ss03 / ss04` features for tabular figures and alternate glyphs.
|
||||||
|
- **Inter** — open-source sans-serif used for UI: button labels, captions, card body text, nav links.
|
||||||
|
- **Geist Mono** — open-source monospace used in code wells.
|
||||||
|
|
||||||
|
When proprietary families cannot be licensed, **Söhne** or **Tiempos Headline** stand in for Domaine Display, and **Geist** or **Inter Tight** can replace ABC Favorit. Inter and Geist Mono are open-source and should be used directly.
|
||||||
|
|
||||||
|
### Hierarchy
|
||||||
|
|
||||||
|
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||||||
|
|---|---|---|---|---|---|
|
||||||
|
| `{typography.display-xxl}` | 96px | 400 | 1.0 | -0.96px | Home hero ("Email for developers"). One per page. |
|
||||||
|
| `{typography.display-xl}` | 76.8px | 400 | 1.0 | -0.768px | Section openers ("Email reimagined", "Available today"). |
|
||||||
|
| `{typography.display-lg}` | 56px | 400 | 1.2 | -2.8px | ABC Favorit display sub-titles. |
|
||||||
|
| `{typography.heading-md}` | 24px | 500 | 1.5 | -0.4px | Card titles, section sub-titles. |
|
||||||
|
| `{typography.heading-sm}` | 20px | 500 | 1.3 | -0.3px | List headers. |
|
||||||
|
| `{typography.subtitle}` | 20px | 400 | 1.3 | 0 | Hero subtitles. |
|
||||||
|
| `{typography.body-lg}` | 18px | 400 | 1.5 | 0 | Marketing prose. |
|
||||||
|
| `{typography.body-md}` | 16px | 400 | 1.5 | -0.8px | ABC Favorit body. |
|
||||||
|
| `{typography.body-sm}` | 14px | 400 | 1.43 | 0 | Captions, metadata. |
|
||||||
|
| `{typography.button-md}` | 14px | 500 | 1.43 | 0 | Default button label. |
|
||||||
|
| `{typography.button-sm}` | 14px | 500 | 1.43 | 0.35px | Pill labels, inline links. |
|
||||||
|
| `{typography.caption}` | 12px | 400 | 1.5 | 0 | Footer disclosure, copyright. |
|
||||||
|
| `{typography.caption-emph}` | 14px | 600 | 1.0 | 0 | Emphatic small caption — Helvetica fallback. |
|
||||||
|
| `{typography.code-md}` | 13px | 400 | 1.6 | 0 | Code blocks, inline code. |
|
||||||
|
|
||||||
|
### Principles
|
||||||
|
- Display sizes always run at `lineHeight: 1.0` with negative letter-spacing — the Domaine Display headlines pack into solid typographic blocks rather than open prose lines.
|
||||||
|
- Body weight stays at 400 across `{typography.body-lg}` and `{typography.body-md}`. The serif/sans family change carries hierarchy, not weight bumps.
|
||||||
|
- ABC Favorit always runs with `ss01 / ss04 / ss11` engaged; Inter never carries OpenType features. Code in Geist Mono never carries ligatures.
|
||||||
|
- Inline links use `{typography.button-sm}` with positive letter-spacing (`0.35px`) and ABC Favorit — the small spacing nudge gives interactive prose its precision.
|
||||||
|
|
||||||
|
### Note on Font Substitutes
|
||||||
|
|
||||||
|
When Domaine Display is unavailable, clamp `lineHeight` to 1.0 explicitly and apply `font-feature-settings: "ss01", "liga"` on the substitute serif to mimic the alternate glyphs. Söhne or Tiempos Headline will read closest. ABC Favorit substitutes (Geist, Inter Tight) typically default to looser tracking — apply -0.5% letter-spacing on body sizes to compensate.
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
|
||||||
|
### Spacing System
|
||||||
|
- **Base unit**: 4px, with the working scale on multiples of 4 / 8 / 16.
|
||||||
|
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.xxxl}` 48px · `{spacing.section}` 96px · `{spacing.band}` 128px.
|
||||||
|
- Section padding: `{spacing.section}` (96px) vertical between bands; `{spacing.band}` (128px) on the hero stripe and closing footer transition.
|
||||||
|
- Card internal padding: `{spacing.xxl}` (32px) on `{component.feature-card}`, `{component.pricing-tier}`, and `{component.code-window}`.
|
||||||
|
|
||||||
|
### Grid & Container
|
||||||
|
- **Max content width** ≈ 1200px on body sections.
|
||||||
|
- **Feature grid**: 3 columns at desktop, 2 at tablet, 1 at mobile.
|
||||||
|
- **Pricing**: 3-tier grid centred at desktop; centre tier promotes to `{component.pricing-tier-featured}` (one-step-elevated surface).
|
||||||
|
- **Code-story splits**: a 2-up split — narrative copy left, `{component.code-window}` right — collapsing to stacked at < 1024px.
|
||||||
|
- **Email mockup band**: a single white card (640px max width) centred in the dark canvas with generous vertical padding to read like a print magazine inset.
|
||||||
|
|
||||||
|
### Whitespace Philosophy
|
||||||
|
- Whitespace is editorial and generous — full-bleed sections breathe at 96–128px so Domaine Display headlines have room to register at scale.
|
||||||
|
- Inside cards, padding stays at 32px so feature copy and code wells have a consistent rhythm with the outer grid.
|
||||||
|
- Hairline `{colors.hairline}` and `{colors.hairline-strong}` carry the role drop shadows would in a brighter system; the dark canvas suppresses traditional shadow depth entirely.
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
|
||||||
|
| Level | Treatment | Use |
|
||||||
|
|---|---|---|
|
||||||
|
| 0 — flat | No shadow, no border | Default canvas, full-bleed bands. |
|
||||||
|
| 1 — surface card | `{colors.surface-card}` (`#0a0a0c`) + 1px `{colors.hairline-strong}` | Feature cards, pricing tiers, form inputs. |
|
||||||
|
| 2 — elevated | `{colors.surface-elevated}` (`#101012`) + 1px `{colors.hairline-strong}` | Featured pricing tier, ghost button. |
|
||||||
|
| 3 — code well | `{colors.surface-deep}` (`#06060a`) + 1px `{colors.hairline-strong}` | Code window, terminal shells. |
|
||||||
|
| 4 — atmospheric glow | Low-opacity radial gradient (`{colors.accent-*-glow}`) anchored at section top | Section openers ("Integrate this weekend", "Email reimagined"). |
|
||||||
|
|
||||||
|
The system has **no traditional drop shadow language**. Every surface either gets a translucent-white hairline border or sits inside an atmospheric glow. The dark canvas absorbs shadow naturally; surfaces register depth via temperature and luminance shifts rather than blur.
|
||||||
|
|
||||||
|
### Decorative Depth
|
||||||
|
- **Atmospheric section glows** — six accent colours each with a paired glow token (orange, yellow, blue, green, red, plus a deep slate for "everything in your context"). Each section opens with a single radial wash anchored at the top edge of the section, falling off to canvas black within ~600px vertical distance. Never two glows in the same section.
|
||||||
|
- **Email card insets** — the "Beyond experience" mockup band lifts a single white email card off the black canvas, giving it the only true light-on-dark contrast in the system. The card uses no shadow; the contrast itself is the elevation.
|
||||||
|
- **Code window traffic lights** — `{component.code-window}` shells include a row of three coloured dots (red `{colors.accent-red}`, yellow `{colors.accent-yellow}`, green `{colors.accent-green}`) at the top — the only place all three semantic colours appear together as solid surfaces.
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
|
||||||
|
### Border Radius Scale
|
||||||
|
|
||||||
|
| Token | Value | Use |
|
||||||
|
|---|---|---|
|
||||||
|
| `{rounded.none}` | 0px | Hero stripe, full-bleed bands, footer. |
|
||||||
|
| `{rounded.xs}` | 4px | Inline tags inside code wells. |
|
||||||
|
| `{rounded.sm}` | 6px | Code tabs, mid-size chips. |
|
||||||
|
| `{rounded.md}` | 8px | Buttons, form inputs. |
|
||||||
|
| `{rounded.lg}` | 12px | Feature cards, pricing tiers, code wells, email mockups. |
|
||||||
|
| `{rounded.xl}` | 16px | Larger feature panels. |
|
||||||
|
| `{rounded.full}` | 9999px | Pills, status dots, contributor avatars. |
|
||||||
|
|
||||||
|
### Photography Geometry
|
||||||
|
- The system uses almost no photography. Visual interest comes from typography + atmospheric glows + code wells + the white email-card insets.
|
||||||
|
- When portraits appear (testimonial avatars), they are circular (`{rounded.full}`) at 32px, sitting inline with body copy.
|
||||||
|
- Email mockup cards run at 4:5 portrait aspect with `{rounded.lg}` corners.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
### Buttons
|
||||||
|
|
||||||
|
**`button-primary`** — white CTA
|
||||||
|
- Background `{colors.primary}`, label `{colors.primary-on}`, type `{typography.button-md}`, padding `8px 16px`, `rounded: {rounded.md}`, height 36px.
|
||||||
|
- The brightest pixel on the canvas. Used for "Get started", "Sign up", "Try Resend".
|
||||||
|
- Pressed state lives in `button-primary-pressed` (background `{colors.surface-light}`).
|
||||||
|
|
||||||
|
**`button-ghost`** — translucent CTA
|
||||||
|
- Background `{colors.surface-elevated}`, label `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.md}`, height 36px.
|
||||||
|
- Equal-weight secondary action paired with `{component.button-primary}`.
|
||||||
|
|
||||||
|
**`button-outline`** — outlined CTA
|
||||||
|
- Background `{colors.canvas}`, label `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.button-md}`, `rounded: {rounded.md}`, height 36px.
|
||||||
|
- Tertiary action; appears on its own next to inline links.
|
||||||
|
|
||||||
|
### Cards & Containers
|
||||||
|
|
||||||
|
**`hero-stripe`** — full-bleed hero
|
||||||
|
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.display-xxl}` for the headline, padding `96px 32px`, `rounded: {rounded.none}`.
|
||||||
|
- Used only on the home page hero band; carries the 96px Domaine Display headline and a single `{component.button-primary}` CTA. No photography, no atmospheric glow inside the hero itself — the glow appears on the section that follows.
|
||||||
|
|
||||||
|
**`feature-card`** — feature highlight card
|
||||||
|
- Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px).
|
||||||
|
- Used in the home grid: "Despite emails using React", "So beyond editing", etc. No outline by default — relies on canvas black contrast.
|
||||||
|
|
||||||
|
**`feature-card-bordered`** — outlined feature card
|
||||||
|
- Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`.
|
||||||
|
- Used when feature cards sit close together and need explicit separation.
|
||||||
|
|
||||||
|
**`pricing-tier`** — pricing tier card
|
||||||
|
- Background `{colors.surface-card}`, text `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}` (32px).
|
||||||
|
- Tier name in `{typography.heading-md}` + price in `{typography.display-lg}` (ABC Favorit, 56px).
|
||||||
|
|
||||||
|
**`pricing-tier-featured`** — recommended tier
|
||||||
|
- Background `{colors.surface-elevated}`, text `{colors.ink}`, 1px `{colors.hairline-strong}`, type `{typography.body-md}`, `rounded: {rounded.lg}`, padding `{spacing.xxl}`.
|
||||||
|
- Centre tier elevated by surface luminance, not by colour.
|
||||||
|
|
||||||
|
**`code-window`** — code well
|
||||||
|
- Background `{colors.surface-deep}`, text `{colors.body}`, type `{typography.code-md}`, 1px `{colors.hairline-strong}`, `rounded: {rounded.lg}`, padding `{spacing.xl}` (24px).
|
||||||
|
- Includes a 3-dot traffic-light row at top using `{colors.accent-red}` / `{colors.accent-yellow}` / `{colors.accent-green}` for chrome, plus a tab strip below it.
|
||||||
|
|
||||||
|
**`code-tab`** — code language tab
|
||||||
|
- Background `{colors.surface-card}`, text `{colors.charcoal}`, type `{typography.code-md}`, `rounded: {rounded.sm}`, padding `6px 12px`.
|
||||||
|
- Active tab bumps text to `{colors.ink}` and adds a subtle `{colors.hairline-strong}` underline.
|
||||||
|
|
||||||
|
**`email-mockup`** — email-card inset
|
||||||
|
- Background `{colors.surface-card}` (or the rare `#ffffff` when rendered as a light-island inset), text `{colors.ink}` (or `{colors.on-light}` for white insets), type `{typography.body-md}`, `rounded: {rounded.lg}`, padding 0.
|
||||||
|
- Used in the "Beyond experience" band to demonstrate rendered email output.
|
||||||
|
|
||||||
|
### Inputs & Forms
|
||||||
|
|
||||||
|
**`text-input`** — default input
|
||||||
|
- Background `{colors.surface-card}`, text `{colors.ink}`, type `{typography.body-sm}`, 1px `{colors.hairline-strong}`, `rounded: {rounded.md}`, padding `10px 14px`, height 40px.
|
||||||
|
- Sign-up and waitlist email fields. Focus state thickens the border to `{colors.ink}` (no separate ring colour).
|
||||||
|
|
||||||
|
### Navigation
|
||||||
|
|
||||||
|
**`nav-bar`** — top nav (desktop)
|
||||||
|
- Background `{colors.canvas}`, text `{colors.body}`, type `{typography.button-sm}`, height 64px, single hairline `{colors.hairline}` bottom border.
|
||||||
|
- Left: wordmark logo. Centre: top-level nav ("Features", "Pricing", "Docs", "Customers"). Right: "Sign in" link + `{component.button-primary}`.
|
||||||
|
|
||||||
|
**`nav-bar`** (mobile)
|
||||||
|
- Same height 64px, collapses centre nav into a hamburger icon. Logo stays left, sign-in CTA stays right.
|
||||||
|
|
||||||
|
**`sub-nav-pill`** — pill-style sub-nav
|
||||||
|
- Pill chips set in a horizontal row above content (e.g. on the customers index), `{component.sub-nav-pill}` styling.
|
||||||
|
|
||||||
|
### Signature Components
|
||||||
|
|
||||||
|
**`badge-pill`** — neutral pill
|
||||||
|
- Background `{colors.surface-elevated}`, text `{colors.body}`, type `{typography.caption}`, `rounded: {rounded.full}`, padding `4px 10px`.
|
||||||
|
- Inline tags ("New", "Beta", "v3.0") inside hero copy and customer story headers.
|
||||||
|
|
||||||
|
**`status-dot`** — status indicator
|
||||||
|
- Background `{colors.accent-green}`, `rounded: {rounded.full}`, 8px square.
|
||||||
|
- Inline indicator next to "Status: Operational" in the footer or system status references.
|
||||||
|
|
||||||
|
**`contributor-avatar`** — testimonial avatar
|
||||||
|
- Background `{colors.surface-card}` placeholder, `rounded: {rounded.full}`, 32×32px.
|
||||||
|
- Used inline with customer testimonials.
|
||||||
|
|
||||||
|
**`footer`** — global footer
|
||||||
|
- Background `{colors.canvas}`, text `{colors.charcoal}`, type `{typography.body-sm}`, `rounded: {rounded.none}`, padding `64px 32px`.
|
||||||
|
- Multi-column quick-links grid above a single-line copyright row separated by `{colors.divider-soft}`.
|
||||||
|
|
||||||
|
## Do's and Don'ts
|
||||||
|
|
||||||
|
### Do
|
||||||
|
- Use `{colors.canvas}` (true black) as the default page background. Every public page lives here.
|
||||||
|
- Reserve `{component.button-primary}` (white pill) as the only solid bright surface. One per viewport at most.
|
||||||
|
- Set hero headlines in **Domaine Display** at 76–96px with `lineHeight: 1.0` and `ss01 / ss04 / ss11` features engaged.
|
||||||
|
- Use **ABC Favorit** for marketing body, **Inter** for UI labels, **Geist Mono** for code. Keep the lanes strict.
|
||||||
|
- Build elevation from translucent-white hairlines, not drop shadows.
|
||||||
|
- Use `{colors.accent-*-glow}` tokens as low-opacity radial atmospheric washes — never as solid surfaces.
|
||||||
|
- Set buttons and inputs to `{rounded.md}` (8px); cards and code wells to `{rounded.lg}` (12px); pills and avatars to `{rounded.full}`.
|
||||||
|
- Use the white email-mockup inset sparingly — it's the only deliberately-light surface and should feel like a print pull-quote.
|
||||||
|
|
||||||
|
### Don't
|
||||||
|
- Don't use a near-black canvas. The brand sits on `#000000`, not `#0a0a0a`.
|
||||||
|
- Don't apply solid colour to atmospheric accent tokens. `{colors.accent-orange}` is for inline highlights only — its glow form is for backdrops.
|
||||||
|
- Don't add drop shadows to feature cards or code wells. Translucent white borders carry depth on this canvas.
|
||||||
|
- Don't bump body weight to 600 for emphasis. Use family change (Inter → ABC Favorit → Domaine Display) instead.
|
||||||
|
- Don't render code outside `{component.code-window}` — even small inline code uses Geist Mono and a `{colors.surface-card}` background.
|
||||||
|
- Don't loosen Domaine Display `lineHeight` past 1.0. Tight stacking is structural to the brand.
|
||||||
|
- Don't introduce a secondary brand accent. White is the brand on black — accents are atmospheric only.
|
||||||
|
- Don't bring photography front-and-centre. The brand reads as type-and-code, not photography-led.
|
||||||
|
|
||||||
|
## Responsive Behavior
|
||||||
|
|
||||||
|
### Breakpoints
|
||||||
|
|
||||||
|
| Name | Width | Key Changes |
|
||||||
|
|---|---|---|
|
||||||
|
| Desktop XL | ≥ 1440px | Full max-width 1200 body, 3-up feature grid, side-by-side code-story splits. |
|
||||||
|
| Desktop | 1280–1439px | Container shrinks; xl side padding. |
|
||||||
|
| Tablet Large | 1024–1279px | Feature grid stays 3-up, code-story remains 2-up. |
|
||||||
|
| Tablet | 768–1023px | Feature grid 2-up, code-story stacks (narrative on top), pricing stacks vertically. |
|
||||||
|
| Mobile Large | 426–767px | Feature grid 1-up; nav collapses to hamburger; hero `{typography.display-xxl}` clamps to 56px. |
|
||||||
|
| Mobile | ≤ 425px | All grids 1-up, hero clamps to 44px, section padding `{spacing.section}` collapses to 64px. |
|
||||||
|
|
||||||
|
### Touch Targets
|
||||||
|
- All buttons ship at minimum 36px tall on desktop, scaling to 44px on mobile via padding adjustment. WCAG AAA met on mobile.
|
||||||
|
- `{component.text-input}` is 40px tall — comfortable but not large. Mobile scales to 48px via padding.
|
||||||
|
- `{component.sub-nav-pill}` stays at 36px on desktop, 40px on mobile.
|
||||||
|
|
||||||
|
### Collapsing Strategy
|
||||||
|
- Top-level nav collapses to hamburger at < 1024px; the wordmark and `{component.button-primary}` stay anchored.
|
||||||
|
- Hero `{typography.display-xxl}` clamps: 96px → 76px → 56px → 44px across the breakpoint ladder.
|
||||||
|
- Pricing 3-up stacks vertically at < 1024px with the featured tier remaining centre-stacked.
|
||||||
|
- Code-story splits switch from side-by-side to stacked at < 1024px, code well always second.
|
||||||
|
- Atmospheric glows scale with section width but maintain the same opacity — they fade naturally at small viewports.
|
||||||
|
|
||||||
|
### Image Behavior
|
||||||
|
- Email mockup cards reflow at 1:1 aspect on mobile to remain readable.
|
||||||
|
- Atmospheric glows are CSS gradients — no asset cost, no breakpoint variation.
|
||||||
|
- Customer testimonial avatars stay 32px circular regardless of breakpoint.
|
||||||
|
|
||||||
|
## Iteration Guide
|
||||||
|
|
||||||
|
1. Focus on ONE component at a time. Most surfaces share `{colors.surface-card}` or `{colors.surface-elevated}` with `{rounded.lg}` — only the role-specific tokens (`{colors.primary}`, `{component.code-window}`) shift between variants.
|
||||||
|
2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.lg}`) — do not paraphrase.
|
||||||
|
3. Run `npx @google/design.md lint DESIGN.md` after edits; orphaned-tokens warnings will catch unused entries.
|
||||||
|
4. Add new variants as separate entries (`-pressed`, `-featured`, `-disabled`) — do not bury them in prose.
|
||||||
|
5. Default body type to `{typography.body-md}`; reach for `{typography.subtitle}` only on hero subtitles.
|
||||||
|
6. Keep `{colors.primary}` (white) scarce — if more than one solid white surface appears per viewport, ask whether one should drop to `{component.button-ghost}` instead.
|
||||||
|
|
||||||
|
## Known Gaps
|
||||||
|
|
||||||
|
- Pressed/active visual states are documented only for `button-primary-pressed`; other components rely on the default focus-ring (browser default) for interactive feedback.
|
||||||
|
- Logged-in dashboard surfaces (API keys, sending logs, audience management) are out of scope; only the public marketing canvas is documented.
|
||||||
|
- Email-template editor surfaces (a key product feature) are not extracted — those live behind authentication.
|
||||||
|
- The atmospheric glow rendering uses CSS radial gradients; exact stops and angles vary per section and are not standardised as tokens — render per section-specific design judgment.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 656 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 825 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 728 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 673 KiB |
+449
@@ -0,0 +1,449 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Agung Dev Music — Personal Music Archive</title>
|
||||||
|
<meta name="description" content="A personal collection of original music, ambient compositions, experimental audio projects, and soundtrack releases created by Agung Dev.">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
|
||||||
|
<!-- Open Graph -->
|
||||||
|
<meta property="og:title" content="Agung Dev Music — Personal Music Archive">
|
||||||
|
<meta property="og:description" content="A collection of original music, ambient compositions, experimental audio projects, and soundtrack releases created by Agung Dev.">
|
||||||
|
<meta property="og:image" content="images/logo.png">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
|
||||||
|
<!-- Preconnect -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|
||||||
|
<!-- Stylesheet -->
|
||||||
|
<link rel="stylesheet" href="index.css">
|
||||||
|
|
||||||
|
<!-- Favicon (inline SVG) -->
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>">
|
||||||
|
</head>
|
||||||
|
<body class="page-loader">
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
NAVIGATION
|
||||||
|
============================ -->
|
||||||
|
<nav class="nav" id="main-nav" role="navigation" aria-label="Main Navigation">
|
||||||
|
<div class="nav__inner">
|
||||||
|
<a href="index.html" class="nav__logo" aria-label="Agung Dev Music Home">
|
||||||
|
<img src="images/logo.png" alt="Agung Dev Music" class="nav__logo-img">
|
||||||
|
<span class="nav__logo-text">Agung Dev Music</span>
|
||||||
|
</a>
|
||||||
|
<div class="footer__links" style="margin: 0; gap: var(--spacing-lg);" id="nav-links">
|
||||||
|
<a href="#hero" class="footer__link">Home</a>
|
||||||
|
<a href="#releases" class="footer__link">Releases</a>
|
||||||
|
<a href="#projects" class="footer__link">Projects</a>
|
||||||
|
<a href="#platforms" class="footer__link">Platforms</a>
|
||||||
|
<a href="#about" class="footer__link">About</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
HERO SECTION
|
||||||
|
============================ -->
|
||||||
|
<section class="hero hero--hub" id="hero" aria-labelledby="hero-title">
|
||||||
|
<div class="hero__content container">
|
||||||
|
|
||||||
|
<!-- Logo Frame -->
|
||||||
|
<div class="scale-in">
|
||||||
|
<img
|
||||||
|
src="images/logo.png"
|
||||||
|
alt="Agung Dev Music Logo"
|
||||||
|
style="height: 80px; width: auto; opacity: 0.95; filter: drop-shadow(0 0 30px rgba(0,212,255,0.25));"
|
||||||
|
width="80"
|
||||||
|
height="80"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Badge -->
|
||||||
|
<span class="hero__badge fade-in fade-in-delay-1" id="hero-tagline">Personal Music Projects & Original Soundtracks</span>
|
||||||
|
|
||||||
|
<!-- Title & Description -->
|
||||||
|
<h1 class="hero__title fade-in fade-in-delay-2" id="hero-title" style="max-width: 800px; font-size: 80px;">
|
||||||
|
Agung Dev Music
|
||||||
|
</h1>
|
||||||
|
<p class="hero__description fade-in fade-in-delay-3" id="label-desc" style="max-width: 580px;">
|
||||||
|
<!-- Loaded dynamically -->
|
||||||
|
Loading archive details...
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- CTAs -->
|
||||||
|
<div class="hero__actions fade-in fade-in-delay-4">
|
||||||
|
<a href="#featured" class="btn-primary">
|
||||||
|
Featured Release
|
||||||
|
</a>
|
||||||
|
<a href="#releases" class="btn-ghost">
|
||||||
|
Browse Archive
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
FEATURED RELEASE SECTION
|
||||||
|
============================ -->
|
||||||
|
<section class="section" id="featured" aria-labelledby="featured-title-sec" style="padding-top: var(--spacing-xxxl);">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">Featured Release</p>
|
||||||
|
<h2 class="section__title fade-in" id="featured-title-sec">Latest Archive Entry</h2>
|
||||||
|
|
||||||
|
<!-- Loaded Dynamically -->
|
||||||
|
<div id="featured-release-container">
|
||||||
|
<!-- Skeleton / Fallback -->
|
||||||
|
<div style="text-align: center; color: var(--color-mute); padding: 48px 0;">
|
||||||
|
Loading featured release...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
LATEST RELEASES
|
||||||
|
============================ -->
|
||||||
|
<section class="section" id="releases" aria-labelledby="releases-title" style="border-top: 1px solid var(--color-hairline);">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">Archive</p>
|
||||||
|
<h2 class="section__title fade-in" id="releases-title">Original Releases</h2>
|
||||||
|
|
||||||
|
<div class="releases-grid" id="releases-grid">
|
||||||
|
<!-- Loaded Dynamically -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
PROJECTS SECTION
|
||||||
|
============================ -->
|
||||||
|
<section class="section" id="projects" aria-labelledby="projects-title" style="border-top: 1px solid var(--color-hairline);">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">Creative Scope</p>
|
||||||
|
<h2 class="section__title fade-in" id="projects-title">Original Projects</h2>
|
||||||
|
|
||||||
|
<div class="artists-grid" id="projects-grid">
|
||||||
|
<!-- Loaded Dynamically -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
STATISTICS SECTION
|
||||||
|
============================ -->
|
||||||
|
<section class="section section--stats" id="stats" aria-labelledby="stats-title">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">Archive Scope</p>
|
||||||
|
<h2 class="section__title fade-in" id="stats-title" style="margin-bottom: var(--spacing-xxl);">Archive Statistics</h2>
|
||||||
|
|
||||||
|
<div class="stats-grid fade-in" style="grid-template-columns: repeat(3, 1fr);">
|
||||||
|
<div class="stats-item">
|
||||||
|
<p class="stats-item__num" id="stat-releases">0</p>
|
||||||
|
<p class="stats-item__label">Releases</p>
|
||||||
|
</div>
|
||||||
|
<div class="stats-item">
|
||||||
|
<p class="stats-item__num" id="stat-projects">0</p>
|
||||||
|
<p class="stats-item__label">Projects</p>
|
||||||
|
</div>
|
||||||
|
<div class="stats-item">
|
||||||
|
<p class="stats-item__num" id="stat-platforms">0</p>
|
||||||
|
<p class="stats-item__label">Listening Platforms</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
SUPPORTED PLATFORMS
|
||||||
|
============================ -->
|
||||||
|
<section class="section section--platforms" id="platforms" aria-labelledby="platforms-title">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">Streaming</p>
|
||||||
|
<h2 class="section__title fade-in" id="platforms-title">Listening Platforms</h2>
|
||||||
|
|
||||||
|
<div class="platforms-grid">
|
||||||
|
<!-- Spotify -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
|
||||||
|
<span class="platform-card__name">Spotify</span>
|
||||||
|
</div>
|
||||||
|
<!-- Apple Music -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.802.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03c.525 0 1.048-.034 1.57-.1.823-.106 1.597-.35 2.296-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.042-1.8-.6-1.965-1.49-.18-.965.39-1.897 1.343-2.147.335-.088.68-.14 1.018-.21.27-.056.535-.124.7-.378.095-.142.12-.32.12-.48V9.96a.56.56 0 00-.04-.222c-.06-.15-.2-.24-.37-.22-.228.03-.46.08-.685.13l-3.645.78c-.03.006-.056.018-.084.027-.128.06-.2.164-.217.3-.005.048-.01.097-.01.146v7.63c0 .082-.003.165-.01.247-.048.622-.287 1.14-.796 1.522a2.324 2.324 0 01-1.073.454c-.34.065-.684.1-1.03.07-.93-.06-1.645-.72-1.71-1.585-.076-1.01.528-1.85 1.477-2.074.33-.08.665-.134 1-.2.258-.05.51-.112.67-.342.1-.14.13-.31.13-.48V7.088c0-.298.07-.57.3-.79.15-.14.34-.22.54-.27.12-.03.24-.05.37-.07l5.16-1.1c.21-.05.42-.09.63-.14.29-.06.45.06.5.35.02.1.03.2.03.29v4.76z"/></svg>
|
||||||
|
<span class="platform-card__name">Apple Music</span>
|
||||||
|
</div>
|
||||||
|
<!-- YouTube Music -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm0 19.104c-3.924 0-7.104-3.18-7.104-7.104S8.076 4.896 12 4.896s7.104 3.18 7.104 7.104-3.18 7.104-7.104 7.104zm0-13.332c-3.432 0-6.228 2.796-6.228 6.228S8.568 18.228 12 18.228 18.228 15.432 18.228 12 15.432 5.772 12 5.772zM9.684 15.54V8.46L16.2 12l-6.516 3.54z"/></svg>
|
||||||
|
<span class="platform-card__name">YouTube Music</span>
|
||||||
|
</div>
|
||||||
|
<!-- Amazon Music -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705c-.209.189-.512.201-.748.074-1.051-.872-1.238-1.276-1.814-2.106-1.736 1.77-2.962 2.3-5.209 2.3-2.66 0-4.731-1.641-4.731-4.925 0-2.565 1.391-4.309 3.37-5.164 1.715-.754 4.11-.891 5.942-1.095v-.41c0-.753.058-1.642-.383-2.294-.385-.579-1.124-.82-1.775-.82-1.205 0-2.277.618-2.54 1.897-.054.285-.261.567-.549.581l-3.074-.331c-.259-.058-.548-.266-.472-.66C6.016 1.573 9.17 0 12.021 0c1.459 0 3.365.389 4.514 1.494 1.459 1.384 1.321 3.231 1.321 5.243v4.749c0 1.427.592 2.053 1.148 2.824.197.275.24.604-.009.806-.624.521-1.736 1.49-2.349 2.033l-.502-.355zM21.052 16.969c-2.139 1.938-5.248 2.969-7.913 2.969-3.746 0-7.122-1.384-9.672-3.689-.201-.182-.021-.43.219-.288 2.754 1.601 6.162 2.565 9.684 2.565 2.374 0 4.985-.492 7.39-1.512.362-.157.667.238.292.455v.5z"/></svg>
|
||||||
|
<span class="platform-card__name">Amazon Music</span>
|
||||||
|
</div>
|
||||||
|
<!-- Tidal -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12.012 3.992L8.008 7.996 4.004 3.992 0 7.996 4.004 12l4.004-4.004L12.012 12l4.004-4.004L12.012 3.992zM12.012 12l-4.004 4.004L12.012 20.008l4.004-4.004L12.012 12zM20.02 3.992l-4.004 4.004L20.02 12l3.98-4.004L20.02 3.992z"/></svg>
|
||||||
|
<span class="platform-card__name">Tidal</span>
|
||||||
|
</div>
|
||||||
|
<!-- Deezer -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M18.81 4.16v3.03H24V4.16h-5.19zM6.27 8.38v3.027h5.189V8.38H6.27zm12.54 0v3.027H24V8.38h-5.19zM6.27 12.594v3.027h5.189v-3.027H6.27zm6.271 0v3.027h5.19v-3.027h-5.19zm6.27 0v3.027H24v-3.027h-5.19zM0 16.81v3.029h5.19v-3.03H0zm6.27 0v3.029h5.189v-3.03H6.27zm6.271 0v3.029h5.19v-3.03h-5.19zm6.27 0v3.029H24v-3.03h-5.19z"/></svg>
|
||||||
|
<span class="platform-card__name">Deezer</span>
|
||||||
|
</div>
|
||||||
|
<!-- TikTok -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
|
||||||
|
<span class="platform-card__name">TikTok</span>
|
||||||
|
</div>
|
||||||
|
<!-- Instagram -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
|
||||||
|
<span class="platform-card__name">Instagram</span>
|
||||||
|
</div>
|
||||||
|
<!-- Facebook -->
|
||||||
|
<div class="platform-card fade-in">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||||||
|
<span class="platform-card__name">Facebook</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
ABOUT THE LABEL
|
||||||
|
============================ -->
|
||||||
|
<section class="section section--about" id="about" aria-labelledby="about-title">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">About</p>
|
||||||
|
<h2 class="section__title fade-in" id="about-title">About Agung Dev Music</h2>
|
||||||
|
|
||||||
|
<div class="about-content fade-in">
|
||||||
|
<p class="about-content__text">
|
||||||
|
<em>Agung Dev Music</em> is a personal space dedicated to publishing original music projects. From ambient soundscapes and electronic experiments to soundtrack-inspired compositions, every release represents a creative idea transformed into sound.
|
||||||
|
<br><br>
|
||||||
|
This is not a traditional record label. It is a digital archive of music created and released by Agung Dev.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
FOOTER
|
||||||
|
============================ -->
|
||||||
|
<footer class="footer" id="footer" role="contentinfo">
|
||||||
|
<div class="footer__inner">
|
||||||
|
|
||||||
|
<!-- Brand -->
|
||||||
|
<div class="footer__brand">
|
||||||
|
<img src="images/logo.png" alt="Agung Dev Music Logo" class="footer__logo">
|
||||||
|
<span class="footer__label-name">Agung Dev Music</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Links -->
|
||||||
|
<div class="footer__links">
|
||||||
|
<a href="index.html" class="footer__link">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||||
|
Website
|
||||||
|
</a>
|
||||||
|
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
||||||
|
YouTube
|
||||||
|
</a>
|
||||||
|
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
|
||||||
|
TikTok
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer__divider"></div>
|
||||||
|
|
||||||
|
<!-- Bottom -->
|
||||||
|
<div class="footer__bottom" style="flex-direction: column; align-items: center; gap: var(--spacing-sm);">
|
||||||
|
<p class="footer__contact" style="color: var(--color-mute); font-size: 13px;">
|
||||||
|
Original Music, Soundtracks, and Creative Audio Projects.
|
||||||
|
</p>
|
||||||
|
<p class="footer__copyright">
|
||||||
|
© 2025 Agung Dev.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
JAVASCRIPT
|
||||||
|
============================ -->
|
||||||
|
<script>
|
||||||
|
// ── Scroll-based navigation background ──
|
||||||
|
const nav = document.getElementById('main-nav');
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (window.scrollY > 40) {
|
||||||
|
nav.classList.add('scrolled');
|
||||||
|
} else {
|
||||||
|
nav.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
|
|
||||||
|
// ── Intersection Observer for scroll animations ──
|
||||||
|
const observerOptions = {
|
||||||
|
root: null,
|
||||||
|
rootMargin: '0px 0px -60px 0px',
|
||||||
|
threshold: 0.1
|
||||||
|
};
|
||||||
|
|
||||||
|
const animationObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
animationObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe static animations
|
||||||
|
document.querySelectorAll('.fade-in, .scale-in').forEach((el) => {
|
||||||
|
animationObserver.observe(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Dynamic Data Loading System ──
|
||||||
|
fetch('labelsong.json')
|
||||||
|
.then(response => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to load archive data');
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
// 1. Update Hero details
|
||||||
|
document.getElementById('label-desc').textContent = data.label.description;
|
||||||
|
|
||||||
|
// 2. Populate Featured Release
|
||||||
|
const featuredSlug = data.featured_release;
|
||||||
|
const featuredRelease = data.releases.find(r => r.slug === featuredSlug) || data.releases[0];
|
||||||
|
|
||||||
|
if (featuredRelease) {
|
||||||
|
const featuredContainer = document.getElementById('featured-release-container');
|
||||||
|
featuredContainer.innerHTML = `
|
||||||
|
<div class="featured-card fade-in">
|
||||||
|
<a href="${featuredRelease.url}" class="featured-card__artwork-link" aria-label="View ${featuredRelease.title} details">
|
||||||
|
<img src="${featuredRelease.artwork}" alt="${featuredRelease.title} Cover Art" class="featured-card__artwork">
|
||||||
|
</a>
|
||||||
|
<div class="featured-card__content">
|
||||||
|
<span class="featured-card__tag">Latest Release</span>
|
||||||
|
<h3 class="featured-card__title">${featuredRelease.title}</h3>
|
||||||
|
<p class="featured-card__artist">by ${featuredRelease.artist}</p>
|
||||||
|
<p class="featured-card__desc">
|
||||||
|
An ambient project exploring textures and atmospheres. Listen to the latest creative soundtrack release now.
|
||||||
|
</p>
|
||||||
|
<a href="${featuredRelease.url}" class="btn-primary featured-card__btn">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||||
|
Listen Now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Populate Releases Grid
|
||||||
|
const grid = document.getElementById('releases-grid');
|
||||||
|
grid.innerHTML = '';
|
||||||
|
data.releases.forEach(release => {
|
||||||
|
const formattedDate = new Date(release.release_date).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
});
|
||||||
|
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'release-card fade-in';
|
||||||
|
card.innerHTML = `
|
||||||
|
<a href="${release.url}" class="release-card__artwork-wrapper" aria-label="View ${release.title} details">
|
||||||
|
<img src="${release.artwork}" alt="${release.title} Cover Art" class="release-card__artwork" loading="lazy">
|
||||||
|
</a>
|
||||||
|
<div class="release-card__content">
|
||||||
|
<h3 class="release-card__title">${release.title}</h3>
|
||||||
|
<p class="release-card__artist">${release.artist}</p>
|
||||||
|
<p class="release-card__date">${formattedDate}</p>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
grid.appendChild(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Populate Projects Grid
|
||||||
|
const projectsGrid = document.getElementById('projects-grid');
|
||||||
|
projectsGrid.innerHTML = '';
|
||||||
|
data.projects.forEach(project => {
|
||||||
|
const pcard = document.createElement('div');
|
||||||
|
pcard.className = 'artist-card fade-in';
|
||||||
|
pcard.innerHTML = `
|
||||||
|
<img src="${project.avatar}" alt="${project.title}" class="artist-card__avatar" style="border-radius: var(--rounded-lg);" loading="lazy">
|
||||||
|
<h3 class="artist-card__name">${project.title}</h3>
|
||||||
|
<p class="artist-card__bio" style="max-width: 280px;">${project.desc}</p>
|
||||||
|
`;
|
||||||
|
projectsGrid.appendChild(pcard);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 5. Populate Statistics
|
||||||
|
document.getElementById('stat-releases').textContent = data.stats.releases;
|
||||||
|
document.getElementById('stat-projects').textContent = data.stats.projects;
|
||||||
|
document.getElementById('stat-platforms').textContent = data.stats.platforms;
|
||||||
|
|
||||||
|
// 6. Observe newly dynamically generated items for scroll animations
|
||||||
|
document.querySelectorAll('#featured-release-container .fade-in, #releases-grid .fade-in, #projects-grid .fade-in').forEach(el => {
|
||||||
|
animationObserver.observe(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error loading archive data:', error);
|
||||||
|
document.getElementById('label-desc').textContent = 'Failed to load archive catalog.';
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Smooth scroll for anchor links ──
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||||
|
anchor.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(anchor.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
const offset = 80;
|
||||||
|
const top = target.getBoundingClientRect().top + window.scrollY - offset;
|
||||||
|
window.scrollTo({ top, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"label": {
|
||||||
|
"name": "Agung Dev Music",
|
||||||
|
"description": "A collection of original music, ambient compositions, experimental audio projects, and soundtrack releases created by Agung Dev."
|
||||||
|
},
|
||||||
|
"featured_release": "midnight",
|
||||||
|
"releases": [
|
||||||
|
{
|
||||||
|
"slug": "midnight",
|
||||||
|
"title": "Midnight",
|
||||||
|
"artist": "Lunair",
|
||||||
|
"artwork": "images/midnight-cover.jpg",
|
||||||
|
"release_date": "2026-06-05",
|
||||||
|
"url": "releases/midnight"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"projects": [
|
||||||
|
{
|
||||||
|
"title": "Ambient Soundscapes",
|
||||||
|
"avatar": "images/artist-lunair.jpg",
|
||||||
|
"desc": "Deep synth textures, cosmic pads, and organic drones designed for deep focus, meditation, and relaxation."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Original Soundtracks",
|
||||||
|
"avatar": "images/midnight-cover.jpg",
|
||||||
|
"desc": "Cinematic themes, orchestral arrangements, and dramatic instrumentals for short films and visual stories."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "Experimental Electronics",
|
||||||
|
"avatar": "images/aurora-cover.jpg",
|
||||||
|
"desc": "Modular synthesizer experiments, algorithmic loops, glitch beats, and avant-garde audio projects."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"stats": {
|
||||||
|
"releases": "1",
|
||||||
|
"projects": "3",
|
||||||
|
"platforms": "10"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,371 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Aurora — Agung Dev | Personal Music Archive</title>
|
||||||
|
<meta name="description"
|
||||||
|
content="Aurora — An ethereal ambient electronic journey beneath the dancing northern lights. Created by Agung Dev.">
|
||||||
|
<meta name="theme-color" content="#000000">
|
||||||
|
|
||||||
|
<!-- Open Graph -->
|
||||||
|
<meta property="og:title" content="Aurora — Agung Dev | Personal Music Archive">
|
||||||
|
<meta property="og:description"
|
||||||
|
content="An ethereal ambient electronic journey beneath the dancing northern lights. Created by Agung Dev.">
|
||||||
|
<meta property="og:image" content="../../images/aurora-cover.jpg">
|
||||||
|
<meta property="og:type" content="music.song">
|
||||||
|
|
||||||
|
<!-- Preconnect -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
|
||||||
|
<!-- Stylesheet -->
|
||||||
|
<link rel="stylesheet" href="../../index.css">
|
||||||
|
|
||||||
|
<!-- Custom Aurora Theme Styles -->
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--color-accent-cyan: #11ff99;
|
||||||
|
--color-accent-cyan-glow: rgba(17, 255, 153, 0.16);
|
||||||
|
--color-accent-blue: #00e5ff;
|
||||||
|
--color-accent-blue-glow: rgba(0, 229, 255, 0.18);
|
||||||
|
--color-accent-deep-blue: #092e20;
|
||||||
|
--color-accent-deep-blue-glow: rgba(9, 46, 32, 0.35);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- Favicon (inline SVG) -->
|
||||||
|
<link rel="icon"
|
||||||
|
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎵</text></svg>">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="page-loader">
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
NAVIGATION
|
||||||
|
============================ -->
|
||||||
|
<nav class="nav" id="main-nav" role="navigation" aria-label="Main Navigation">
|
||||||
|
<div class="nav__inner">
|
||||||
|
<a href="../../index.html" class="nav__logo" aria-label="Agung Dev Music Home">
|
||||||
|
<img src="../../images/logo.png" alt="Agung Dev Music" class="nav__logo-img">
|
||||||
|
<span class="nav__logo-text">Agung Dev Music</span>
|
||||||
|
</a>
|
||||||
|
<a href="#listen" class="nav__cta" id="nav-listen-btn">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polygon points="5 3 19 12 5 21 5 3" />
|
||||||
|
</svg>
|
||||||
|
Listen Now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
HERO SECTION
|
||||||
|
============================ -->
|
||||||
|
<section class="hero" id="hero" aria-labelledby="hero-title">
|
||||||
|
<div class="hero__content container">
|
||||||
|
|
||||||
|
<!-- Album Artwork -->
|
||||||
|
<div class="hero__artwork-wrapper scale-in">
|
||||||
|
<div class="hero__artwork-glow" aria-hidden="true"></div>
|
||||||
|
<img src="../../images/l u n i a r.jpg" alt="Midnight — Album Cover" class="hero__artwork" id="album-artwork"
|
||||||
|
width="380" height="380">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Badge -->
|
||||||
|
<span class="hero__badge fade-in fade-in-delay-1">Ethereal Release</span>
|
||||||
|
|
||||||
|
<!-- Creator + Title -->
|
||||||
|
<p class="hero__artist fade-in fade-in-delay-2">Luniar</p>
|
||||||
|
<h1 class="hero__title fade-in fade-in-delay-3" id="hero-title">Midnight</h1>
|
||||||
|
|
||||||
|
<!-- Description -->
|
||||||
|
<p class="hero__description fade-in fade-in-delay-4">
|
||||||
|
An ethereal ambient electronic journey beneath the dancing northern lights.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- CTAs -->
|
||||||
|
<div class="hero__actions fade-in fade-in-delay-5">
|
||||||
|
<a href="#listen" class="btn-primary" id="hero-listen-btn">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polygon points="5 3 19 12 5 21 5 3" />
|
||||||
|
</svg>
|
||||||
|
Listen Now
|
||||||
|
</a>
|
||||||
|
<a href="#release-info" class="btn-ghost" id="hero-details-btn">
|
||||||
|
View Details
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
STREAMING PLATFORMS
|
||||||
|
============================ -->
|
||||||
|
<section class="section section--platforms" id="listen" aria-labelledby="platforms-title">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">Available On</p>
|
||||||
|
<h2 class="section__title fade-in" id="platforms-title">Listen Everywhere</h2>
|
||||||
|
|
||||||
|
<div class="platforms-grid" id="platforms-grid">
|
||||||
|
|
||||||
|
<!-- Spotify -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-spotify" aria-label="Listen on Spotify" target="_blank"
|
||||||
|
rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">Spotify</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Apple Music -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-apple-music" aria-label="Listen on Apple Music"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M23.994 6.124a9.23 9.23 0 00-.24-2.19c-.317-1.31-1.062-2.31-2.18-3.043a5.022 5.022 0 00-1.877-.726 10.496 10.496 0 00-1.564-.15c-.04-.003-.083-.01-.124-.013H5.986c-.152.01-.303.017-.455.026-.747.043-1.49.123-2.193.4-1.336.53-2.3 1.452-2.865 2.78-.192.448-.292.925-.363 1.408-.056.392-.088.785-.1 1.18 0 .032-.007.062-.01.093v12.223c.01.14.017.283.027.424.05.815.154 1.624.497 2.373.65 1.42 1.738 2.353 3.234 2.802.42.127.856.187 1.293.228.555.053 1.11.06 1.667.06h11.03c.525 0 1.048-.034 1.57-.1.823-.106 1.597-.35 2.296-.81a5.046 5.046 0 001.88-2.207c.186-.42.293-.87.37-1.324.113-.675.138-1.358.137-2.04-.002-3.8 0-7.595-.003-11.393zm-6.423 3.99v5.712c0 .417-.058.827-.244 1.206-.29.59-.76.962-1.388 1.14-.35.1-.706.157-1.07.173-.95.042-1.8-.6-1.965-1.49-.18-.965.39-1.897 1.343-2.147.335-.088.68-.14 1.018-.21.27-.056.535-.124.7-.378.095-.142.12-.32.12-.48V9.96a.56.56 0 00-.04-.222c-.06-.15-.2-.24-.37-.22-.228.03-.46.08-.685.13l-3.645.78c-.03.006-.056.018-.084.027-.128.06-.2.164-.217.3-.005.048-.01.097-.01.146v7.63c0 .082-.003.165-.01.247-.048.622-.287 1.14-.796 1.522a2.324 2.324 0 01-1.073.454c-.34.065-.684.1-1.03.07-.93-.06-1.645-.72-1.71-1.585-.076-1.01.528-1.85 1.477-2.074.33-.08.665-.134 1-.2.258-.05.51-.112.67-.342.1-.14.13-.31.13-.48V7.088c0-.298.07-.57.3-.79.15-.14.34-.22.54-.27.12-.03.24-.05.37-.07l5.16-1.1c.21-.05.42-.09.63-.14.29-.06.45.06.5.35.02.1.03.2.03.29v4.76z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">Apple Music</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- YouTube Music -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-youtube-music" aria-label="Listen on YouTube Music"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm0 19.104c-3.924 0-7.104-3.18-7.104-7.104S8.076 4.896 12 4.896s7.104 3.18 7.104 7.104-3.18 7.104-7.104 7.104zm0-13.332c-3.432 0-6.228 2.796-6.228 6.228S8.568 18.228 12 18.228 18.228 15.432 18.228 12 15.432 5.772 12 5.772zM9.684 15.54V8.46L16.2 12l-6.516 3.54z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">YouTube Music</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Amazon Music -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-amazon-music" aria-label="Listen on Amazon Music"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M13.958 10.09c0 1.232.029 2.256-.591 3.351-.502.891-1.301 1.438-2.186 1.438-1.214 0-1.922-.924-1.922-2.292 0-2.692 2.415-3.182 4.7-3.182v.685zm3.186 7.705c-.209.189-.512.201-.748.074-1.051-.872-1.238-1.276-1.814-2.106-1.736 1.77-2.962 2.3-5.209 2.3-2.66 0-4.731-1.641-4.731-4.925 0-2.565 1.391-4.309 3.37-5.164 1.715-.754 4.11-.891 5.942-1.095v-.41c0-.753.058-1.642-.383-2.294-.385-.579-1.124-.82-1.775-.82-1.205 0-2.277.618-2.54 1.897-.054.285-.261.567-.549.581l-3.074-.331c-.259-.058-.548-.266-.472-.66C6.016 1.573 9.17 0 12.021 0c1.459 0 3.365.389 4.514 1.494 1.459 1.384 1.321 3.231 1.321 5.243v4.749c0 1.427.592 2.053 1.148 2.824.197.275.24.604-.009.806-.624.521-1.736 1.49-2.349 2.033l-.502-.355zM21.052 16.969c-2.139 1.938-5.248 2.969-7.913 2.969-3.746 0-7.122-1.384-9.672-3.689-.201-.182-.021-.43.219-.288 2.754 1.601 6.162 2.565 9.684 2.565 2.374 0 4.985-.492 7.39-1.512.362-.157.667.238.292.455v.5z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">Amazon Music</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Tidal -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-tidal" aria-label="Listen on Tidal" target="_blank"
|
||||||
|
rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12.012 3.992L8.008 7.996 4.004 3.992 0 7.996 4.004 12l4.004-4.004L12.012 12l4.004-4.004L12.012 3.992zM12.012 12l-4.004 4.004L12.012 20.008l4.004-4.004L12.012 12zM20.02 3.992l-4.004 4.004L20.02 12l3.98-4.004L20.02 3.992z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">Tidal</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Deezer -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-deezer" aria-label="Listen on Deezer" target="_blank"
|
||||||
|
rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M18.81 4.16v3.03H24V4.16h-5.19zM6.27 8.38v3.027h5.189V8.38H6.27zm12.54 0v3.027H24V8.38h-5.19zM6.27 12.594v3.027h5.189v-3.027H6.27zm6.271 0v3.027h5.19v-3.027h-5.19zm6.27 0v3.027H24v-3.027h-5.19zM0 16.81v3.029h5.19v-3.03H0zm6.27 0v3.029h5.189v-3.03H6.27zm6.271 0v3.029h5.19v-3.03h-5.19zm6.27 0v3.029H24v-3.03h-5.19z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">Deezer</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- SoundCloud -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-soundcloud" aria-label="Listen on SoundCloud"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c-.009-.057-.049-.1-.1-.1m-.899.828c-.06 0-.091.037-.104.094L0 14.479l.172 1.308c.013.06.045.094.104.094.057 0 .09-.037.104-.093l.205-1.309-.205-1.334c-.014-.057-.047-.094-.104-.094m1.794-1.124c-.061 0-.107.046-.117.104l-.222 2.446.222 2.375c.01.058.056.104.117.104.06 0 .107-.046.116-.104l.253-2.375-.253-2.446c-.009-.057-.056-.104-.116-.104m.882-.412c-.066 0-.121.053-.127.115l-.207 2.862.207 2.695c.006.063.061.116.127.116.065 0 .12-.053.125-.116l.234-2.695-.234-2.862c-.005-.062-.06-.115-.125-.115m.865-.141c-.072 0-.131.058-.136.126l-.19 3.003.19 2.776c.005.069.064.127.136.127.071 0 .131-.058.135-.127l.216-2.776-.216-3.003c-.004-.068-.064-.126-.135-.126m.882-.141c-.078 0-.14.064-.143.137l-.173 3.144.173 2.833c.003.075.065.138.143.138s.14-.063.142-.138l.197-2.833-.197-3.144c-.002-.073-.064-.137-.142-.137m.898-.356c-.082 0-.149.071-.152.147l-.162 3.5.162 2.86c.003.078.07.148.152.148s.149-.07.15-.148l.18-2.86-.18-3.5c-.001-.076-.068-.147-.15-.147m.902-.088c-.087 0-.158.078-.158.157l-.15 3.588.15 2.862c0 .082.071.159.158.159s.158-.077.157-.159l.168-2.862-.168-3.588c-.001-.079-.07-.157-.157-.157m.91-.107c-.093 0-.168.082-.17.168l-.132 3.695.132 2.85c.002.088.077.168.17.168.09 0 .167-.08.167-.168l.15-2.85-.15-3.695c-.002-.086-.077-.168-.167-.168m.923-.194c-.097 0-.18.089-.18.18l-.11 3.89.11 2.825c0 .092.082.18.18.18.095 0 .177-.088.178-.18l.123-2.826-.123-3.89c-.001-.09-.083-.18-.178-.18m.922-.201c-.103 0-.19.094-.189.19l-.098 4.09.098 2.788c-.001.098.086.189.189.189.1 0 .187-.09.187-.189l.11-2.788-.11-4.09c0-.096-.087-.19-.187-.19m1.855-.36c-.002-.111-.098-.2-.209-.2-.108 0-.2.088-.202.2l-.085 4.45.085 2.757c.002.112.094.2.202.2.11 0 .207-.088.208-.2l.095-2.757-.094-4.45m.918.072c-.112 0-.206.1-.208.21l-.075 4.168.075 2.73c.002.112.096.21.208.21.11 0 .205-.098.207-.21l.084-2.73-.084-4.168c-.002-.11-.097-.21-.207-.21m3.818-1.597c-.196 0-.38.037-.553.104a4.416 4.416 0 00-4.296-3.429c-.376 0-.748.057-1.095.166-.13.04-.164.085-.166.163v8.544c.002.082.064.15.146.162h5.964a2.454 2.454 0 002.454-2.454 2.454 2.454 0 00-2.454-2.456" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">SoundCloud</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- TikTok -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-tiktok" aria-label="Follow on TikTok" target="_blank"
|
||||||
|
rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">TikTok</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Instagram -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-instagram" aria-label="Follow on Instagram"
|
||||||
|
target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">Instagram</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Facebook -->
|
||||||
|
<a href="#" class="platform-card fade-in" id="platform-facebook" aria-label="Follow on Facebook" target="_blank"
|
||||||
|
rel="noopener noreferrer">
|
||||||
|
<svg class="platform-card__icon" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
||||||
|
</svg>
|
||||||
|
<span class="platform-card__name">Facebook</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
ABOUT THE LABEL
|
||||||
|
============================ -->
|
||||||
|
<section class="section section--about" id="about" aria-labelledby="about-title">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<p class="section__label fade-in">About</p>
|
||||||
|
<h2 class="section__title fade-in" id="about-title">About Agung Dev Music</h2>
|
||||||
|
|
||||||
|
<div class="about-content fade-in">
|
||||||
|
<p class="about-content__text">
|
||||||
|
<em>Agung Dev Music</em> is a personal space dedicated to publishing original music projects. From ambient
|
||||||
|
soundscapes and electronic experiments to soundtrack-inspired compositions, every release represents a
|
||||||
|
creative idea transformed into sound.
|
||||||
|
<br><br>
|
||||||
|
This is not a traditional record label. It is a digital archive of music created and released by Agung Dev.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
FOOTER
|
||||||
|
============================ -->
|
||||||
|
<footer class="footer" id="footer" role="contentinfo">
|
||||||
|
<div class="footer__inner">
|
||||||
|
|
||||||
|
<!-- Brand -->
|
||||||
|
<div class="footer__brand">
|
||||||
|
<img src="../../images/logo.png" alt="Agung Dev Music" class="footer__logo">
|
||||||
|
<span class="footer__label-name">Agung Dev Music</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Links -->
|
||||||
|
<div class="footer__links">
|
||||||
|
<a href="../../index.html" class="footer__link">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||||
|
stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<line x1="2" y1="12" x2="22" y2="12" />
|
||||||
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
||||||
|
</svg>
|
||||||
|
Website
|
||||||
|
</a>
|
||||||
|
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
||||||
|
</svg>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||||
|
</svg>
|
||||||
|
YouTube
|
||||||
|
</a>
|
||||||
|
<a href="#" class="footer__link" target="_blank" rel="noopener noreferrer">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
||||||
|
<path
|
||||||
|
d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
|
||||||
|
</svg>
|
||||||
|
TikTok
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer__divider"></div>
|
||||||
|
|
||||||
|
<!-- Bottom -->
|
||||||
|
<div class="footer__bottom" style="flex-direction: column; align-items: center; gap: var(--spacing-sm);">
|
||||||
|
<p class="footer__contact" style="color: var(--color-mute); font-size: 13px;">
|
||||||
|
Original Music, Soundtracks, and Creative Audio Projects.
|
||||||
|
</p>
|
||||||
|
<p class="footer__copyright">
|
||||||
|
© 2025 Agung Dev.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================
|
||||||
|
JAVASCRIPT
|
||||||
|
============================ -->
|
||||||
|
<script>
|
||||||
|
// ── Scroll-based navigation background ──
|
||||||
|
const nav = document.getElementById('main-nav');
|
||||||
|
const handleScroll = () => {
|
||||||
|
if (window.scrollY > 40) {
|
||||||
|
nav.classList.add('scrolled');
|
||||||
|
} else {
|
||||||
|
nav.classList.remove('scrolled');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||||
|
|
||||||
|
// ── Intersection Observer for scroll animations ──
|
||||||
|
const observerOptions = {
|
||||||
|
root: null,
|
||||||
|
rootMargin: '0px 0px -60px 0px',
|
||||||
|
threshold: 0.1
|
||||||
|
};
|
||||||
|
|
||||||
|
const animationObserver = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('visible');
|
||||||
|
animationObserver.unobserve(entry.target);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe all animated elements
|
||||||
|
document.querySelectorAll('.fade-in, .scale-in').forEach((el) => {
|
||||||
|
animationObserver.observe(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Smooth scroll for anchor links ──
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||||
|
anchor.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(anchor.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
const offset = 80; // nav height + padding
|
||||||
|
const top = target.getBoundingClientRect().top + window.scrollY - offset;
|
||||||
|
window.scrollTo({ top, behavior: 'smooth' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Parallax effect on album artwork ──
|
||||||
|
const artwork = document.querySelector('.hero__artwork-wrapper');
|
||||||
|
if (artwork && window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
const scrolled = window.scrollY;
|
||||||
|
const rate = scrolled * 0.15;
|
||||||
|
artwork.style.transform = `translateY(${rate}px)`;
|
||||||
|
}, { passive: true });
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user