/* ===== flattened design-system styles ===== */ /* tokens/fonts.css */ /* ── Nityama webfonts ─────────────────────────────────────────────── SUBSTITUTION NOTE: the live nityama.com fonts are not published as downloadable files, so these are close Google Fonts stand-ins chosen to match the brand's feel: · Cormorant Garamond — the airy, reverent display serif that carries the poetic voice ("There is a quieter kind of power"). · Hanken Grotesk — clean humanist sans for UI + body copy. · Anton — heavy condensed impact face for the transmission / YouTube-thumbnail poster headlines. Replace with the real brand binaries when available. ───────────────*/ /* tokens/colors.css */ /* ════════════════════════════════════════════════════════════════════ NITYAMA · COLOR SYSTEM A warm, earthen, candle-lit palette drawn from the brand imagery: parchment & bone surfaces, deep warm ink, saffron/marigold life-force, ceremonial gold, terracotta, and the dove-blue of the transmissions. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Warm neutrals (parchment → ink) ─────────────────────────── */ --bone: #F5EEE0; /* lightest parchment — default page ground */ --cream: #ECE0CB; /* parchment */ --sand: #DFCEB1; /* aged paper / soft divider ground */ --clay: #C8B393; /* muted warm tan */ --umber: #6E6151; /* warm brown-grey — secondary text */ --umber-soft: #8A7C6A; /* muted warm grey — tertiary text */ --ink-soft: #382F26; /* warm near-black, softened */ --ink: #1C1813; /* deep warm ink — the sigil black */ /* ── Brand life-force ────────────────────────────────────────── */ --saffron: #C97B2C; /* primary — the marigold/amber of the work */ --saffron-deep: #A35E18; /* pressed / hover-dark */ --saffron-soft: #E6B987; /* tints, washes, glows */ --gold: #BFA04C; /* ceremonial gold — fine accents, rules */ --gold-deep: #91773099; /* gold at rest */ /* ── Supporting earth & sky ──────────────────────────────────── */ --terracotta: #B5523A; /* clay red — sparing emphasis */ --dove: #BFD0DA; /* soft transmission blue */ --dove-deep: #7E9AAA; /* blue at depth */ --sage: #8B9A78; /* muted plant green */ /* ── Translucent veils (over photography / ink) ──────────────── */ --veil-ink: rgba(28, 24, 19, 0.62); --veil-ink-soft: rgba(28, 24, 19, 0.34); --veil-bone: rgba(245, 238, 224, 0.86); --line-on-bone: rgba(28, 24, 19, 0.12); --line-on-ink: rgba(245, 238, 224, 0.16); /* ════════ SEMANTIC ALIASES ════════════════════════════════════ */ /* Surfaces */ --surface-page: var(--bone); --surface-card: #FBF6EC; /* a touch above the page */ --surface-sunken: var(--cream); /* wells, inputs, quiet panels */ --surface-ink: var(--ink); /* dark reverent sections */ --surface-ink-2: #261F18; /* raised panel on ink */ /* Text */ --text-strong: var(--ink); --text-body: var(--ink-soft); --text-muted: var(--umber); --text-faint: var(--umber-soft); --text-on-ink: var(--bone); --text-on-ink-muted: #C9BBA4; --text-accent: var(--saffron-deep); /* Accent */ --accent: var(--saffron); --accent-hover: var(--saffron-deep); --accent-wash: var(--saffron-soft); --accent-contrast:#FFFFFF; /* Lines & borders */ --border: var(--line-on-bone); --border-strong: rgba(28, 24, 19, 0.22); --border-on-ink: var(--line-on-ink); --rule-gold: var(--gold); } /* tokens/typography.css */ /* ════════════════════════════════════════════════════════════════════ NITYAMA · TYPE SYSTEM Three voices: · Serif (Cormorant Garamond) — the reverent, poetic display voice. Airy, light-weight, generous. Carries headlines & pull-quotes. · Sans (Hanken Grotesk) — calm humanist UI + body copy. · Impact (Anton) — heavy condensed poster face for transmission / media-style headlines. UPPERCASE only. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Families ────────────────────────────────────────────────── */ --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif; --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; --font-impact: 'Anton', 'Hanken Grotesk', sans-serif; /* ── Semantic family aliases ─────────────────────────────────── */ --font-display: var(--font-serif); /* reverent headlines */ --font-poster: var(--font-impact); /* loud media headlines */ --font-body: var(--font-sans); /* paragraphs, UI */ --font-eyebrow: var(--font-sans); /* small tracked labels */ /* ── Type scale (display sizes lean on the serif) ────────────── */ --text-xs: 0.75rem; /* 12px — captions, fine print */ --text-sm: 0.875rem; /* 14px — meta, eyebrows */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — lead body */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 3rem; /* 48px */ --text-4xl: 4rem; /* 64px */ --text-5xl: 5.5rem; /* 88px — hero serif */ /* ── Weights ─────────────────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ── Line heights ────────────────────────────────────────────── */ --leading-tight: 1.04; /* big serif & poster headlines */ --leading-snug: 1.22; --leading-normal: 1.5; --leading-relaxed: 1.7; /* long reverent body */ /* ── Letter-spacing ──────────────────────────────────────────── */ --tracking-eyebrow: 0.22em; /* tracked uppercase labels */ --tracking-poster: 0.01em; --tracking-tight: -0.015em; --tracking-serif: -0.005em; } /* tokens/spacing.css */ /* ════════════════════════════════════════════════════════════════════ NITYAMA · SPACE, RADIUS, SHADOW, MOTION Generous, unhurried spacing. Soft organic radii. Shadows are warm and low — candle-light, never harsh. Motion is slow and settling. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Spacing scale (4px base, generous rhythm) ───────────────── */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* Semantic spacing */ --gap-inline: var(--space-3); --gap-stack: var(--space-5); --pad-card: var(--space-6); --section-y: var(--space-9); --measure: 64ch; /* comfortable reading width */ /* ── Radii (soft, organic — never sharp) ─────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* ── Shadows (warm, low, candle-soft) ────────────────────────── */ --shadow-xs: 0 1px 2px rgba(28, 24, 19, 0.06); --shadow-sm: 0 2px 8px rgba(28, 24, 19, 0.07); --shadow-md: 0 10px 30px -12px rgba(28, 24, 19, 0.18); --shadow-lg: 0 26px 60px -22px rgba(28, 24, 19, 0.28); --shadow-glow: 0 0 0 1px rgba(201, 123, 44, 0.20), 0 16px 40px -16px rgba(201, 123, 44, 0.40); /* ── Motion (slow, settling — nothing snaps) ─────────────────── */ --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-fast: 180ms; /* @kind other */ --dur-base: 320ms; /* @kind other */ --dur-slow: 560ms; /* @kind other */ /* ── Elevation veil for dark sections ────────────────────────── */ --grain-opacity: 0.5; /* @kind other */ } /* tokens/base.css */ /* ════════════════════════════════════════════════════════════════════ NITYAMA · BASE ELEMENT STYLES Light, opinionated defaults so any consuming page inherits the brand's calm typographic ground. Tokens come from tokens/*. ════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Reverent serif headings by default */ h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-serif); margin: 0 0 var(--space-4); text-wrap: balance; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4, h5, h6 { font-family: var(--font-body); color: var(--text-strong); font-weight: var(--weight-semibold); line-height: var(--leading-snug); margin: 0 0 var(--space-3); } h4 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); max-width: var(--measure); text-wrap: pretty; } a { color: var(--text-accent); text-decoration: none; } a:hover { color: var(--accent-hover); } strong { font-weight: var(--weight-semibold); color: var(--text-strong); } em { font-style: italic; } hr { border: 0; height: 1px; background: var(--border); margin: var(--space-6) 0; } ::selection { background: var(--accent-wash); color: var(--ink); } /* Small tracked uppercase label utility used across the brand */ .eyebrow { font-family: var(--font-eyebrow); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-accent); } body { margin: 0; } @media (max-width: 860px) { .fnav { display: none; } section [style*="grid-template-columns: 1fr 0.9fr"], section [style*="grid-template-columns: 0.85fr 1fr"], section [style*="grid-template-columns: 1fr 1fr"], .journeygrid { grid-template-columns: 1fr !important; } .filmcover { max-width: 320px; margin: 0 auto; } }