/* ========================================================= world.css — the containing world Loaded after style.css so equal-specificity rules win here. Four systems: 1. Grain — paper tooth over the whole site 2. Dark mode — token flip, not an inversion 3. Dissolve — the fracture, promoted from homepage-only 4. Transitions — one continuous space, not nine documents ========================================================= */ /* ========================================================= 1. GRAIN A single fixed noise layer over the viewport. Fixed rather than per-section so the tooth stays put while content scrolls past it — the page reads as printed ON something, rather than as a stack of textured blocks. Generated, never fetched: zero bytes over the wire. ========================================================= */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.055; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ========================================================= 2. DARK MODE Tokens are redefined; components are never restyled inside the media query. The theme toggle stamps data-theme on and must beat the media query in both directions, so each block is repeated. ========================================================= */ /* --- the dark token set, defined once and referenced by both triggers --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #16191a; /* page ground: green-biased near-black */ --white: #1e2223; /* raised surface (cards) */ --ink: #e7ebe5; /* body text */ --ink-soft: #a5b0a4; --line: #2f3634; --teal: #93c39d; /* brand green, lifted to read on dark */ --teal-dark: #c8ddca; --teal-tint: #1f2725; /* tinted surface, not a light wash */ --teal-tint-2:#1b2120; --sage: #9fd8c7; --accent: #e8794c; /* paprika, brightened */ --accent-dark:#c9603a; --gold: #c98b5e; } } :root[data-theme="dark"] { --paper: #16191a; --white: #1e2223; --ink: #e7ebe5; --ink-soft: #a5b0a4; --line: #2f3634; --teal: #93c39d; --teal-dark: #c8ddca; --teal-tint: #1f2725; --teal-tint-2:#1b2120; --sage: #9fd8c7; --accent: #e8794c; --accent-dark:#c9603a; --gold: #c98b5e; } /* --- components whose colour is NOT expressible as a token flip --- .bg-forest / .bg-graphite / .bg-teal are dark bands on a light page. On a dark page they must stay *distinguishable* from the ground rather than becoming lighter than it, so they get their own values. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header { background: rgba(22, 25, 26, 0.88); } :root:not([data-theme="light"]) .bg-sage { background: #1a2321; } :root:not([data-theme="light"]) .bg-clay { background: #241d19; } :root:not([data-theme="light"]) .bg-forest, :root:not([data-theme="light"]) .bg-teal { background: #23302a; } :root:not([data-theme="light"]) .bg-graphite { background: #0e1011; } :root:not([data-theme="light"]) .site-footer { background: #0e1011; } :root:not([data-theme="light"]) .card { box-shadow: none; border-color: var(--line); } :root:not([data-theme="light"]) .card:hover { border-color: #46554a; box-shadow: 0 18px 40px -28px rgba(0,0,0,0.8); } :root:not([data-theme="light"]) .statement { background: var(--teal-tint); border-color: #33403a; } :root:not([data-theme="light"]) .rate-card .fee { background: var(--teal-tint); border-color: #33403a; } :root:not([data-theme="light"]) .rate-card .fee-note + .fee-note { border-top-color: #33403a; } :root:not([data-theme="light"]) .tag { background: var(--teal-tint); border-color: #33403a; color: var(--teal-dark); } :root:not([data-theme="light"]) body::after { mix-blend-mode: overlay; opacity: 0.09; } :root:not([data-theme="light"]) .portrait-badge { background: rgba(22,25,26,0.9); border-color: rgba(255,255,255,0.12); } :root:not([data-theme="light"]) .hero h1 { color: #a9d4b0; } :root:not([data-theme="light"]) .hero .dissolve-line .dl-front { color: #a9d4b0; } :root:not([data-theme="light"]) .hero .dissolve-line .dl-a { color: #5f8468; } :root:not([data-theme="light"]) .hero .dissolve-line .dl-b { color: #4a7d6d; } } :root[data-theme="dark"] .site-header { background: rgba(22, 25, 26, 0.88); } :root[data-theme="dark"] .bg-sage { background: #1a2321; } :root[data-theme="dark"] .bg-clay { background: #241d19; } :root[data-theme="dark"] .bg-forest, :root[data-theme="dark"] .bg-teal { background: #23302a; } :root[data-theme="dark"] .bg-graphite { background: #0e1011; } :root[data-theme="dark"] .site-footer { background: #0e1011; } :root[data-theme="dark"] .card { box-shadow: none; border-color: var(--line); } :root[data-theme="dark"] .card:hover { border-color: #46554a; box-shadow: 0 18px 40px -28px rgba(0,0,0,0.8); } :root[data-theme="dark"] .statement { background: var(--teal-tint); border-color: #33403a; } :root[data-theme="dark"] .rate-card .fee { background: var(--teal-tint); border-color: #33403a; } :root[data-theme="dark"] .rate-card .fee-note + .fee-note { border-top-color: #33403a; } :root[data-theme="dark"] .tag { background: var(--teal-tint); border-color: #33403a; color: var(--teal-dark); } :root[data-theme="dark"] body::after { mix-blend-mode: overlay; opacity: 0.09; } :root[data-theme="dark"] .portrait-badge { background: rgba(22,25,26,0.9); border-color: rgba(255,255,255,0.12); } :root[data-theme="dark"] .hero h1 { color: #a9d4b0; } :root[data-theme="dark"] .hero .dissolve-line .dl-front { color: #a9d4b0; } :root[data-theme="dark"] .hero .dissolve-line .dl-a { color: #5f8468; } :root[data-theme="dark"] .hero .dissolve-line .dl-b { color: #4a7d6d; } /* --- theme toggle control --- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { color: var(--teal); border-color: var(--teal); transform: rotate(-18deg); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } } /* ========================================================= 3. DISSOLVE, PROMOTED The fracture was a homepage novelty. Used once it reads as an experiment; repeated on every page it reads as identity. Interior heroes get it at a lower amplitude than the homepage — present, not shouting. ========================================================= */ .page-hero h1 { font-family: "Anton", "Archivo", Impact, sans-serif; font-weight: 400; font-size: clamp(2.2rem, 5.6vw, 4.1rem); line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase; color: var(--teal); } .page-hero .dissolve-line { white-space: normal; } .page-hero .dissolve-line .dl-front { color: var(--teal); } .page-hero .dissolve-line .dl-a { color: #6f8a6e; } .page-hero .dissolve-line .dl-b { color: #83bca9; } .page-hero { overflow-x: clip; } @supports not (overflow-x: clip) { .page-hero { overflow-x: hidden; } } @media (max-width: 560px) { .page-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); } } /* The mark, used as a section rule rather than an ornament parked in one corner. A hairline that breaks around the taiji. */ .mark-rule { display: flex; align-items: center; gap: 1rem; margin: 0 0 2.2rem; color: var(--line); } .mark-rule::before, .mark-rule::after { content: ""; height: 1px; background: currentColor; flex: 1; } .mark-rule svg { width: 26px; height: 26px; flex: 0 0 auto; } /* ========================================================= 4. PAGE TRANSITIONS Navigation currently hard-cuts between documents. A short fade on enter and exit makes the site read as one continuous space. No library: a class on , driven by js/world.js. ========================================================= */ @media (prefers-reduced-motion: no-preference) { .page-fade main, .page-fade .site-header, .page-fade .site-footer { animation: page-in 0.5s cubic-bezier(.22,.61,.36,1) both; } .page-fade.is-leaving main, .page-fade.is-leaving .site-header, .page-fade.is-leaving .site-footer { animation: page-out 0.26s cubic-bezier(.55,.06,.68,.19) both; } } @keyframes page-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } @keyframes page-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-7px); } } /* ========================================================= 5. LAYOUT — breaking the card grid Four pages currently run near-identical even grids, which flattens everything to one altitude. These give a section a dominant item. ========================================================= */ /* Asymmetric pair: one wide, one narrow. Reads as a decision. */ .grid-lead { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); } /* Staggered trio — the middle card drops, so the row scans as a wave rather than a fence. Disabled below the breakpoint where it stacks. */ @media (min-width: 861px) { .grid-stagger > :nth-child(2) { transform: translateY(2.2rem); } .grid-stagger > :nth-child(3) { transform: translateY(1.1rem); } } /* A card that carries the section: bigger type, tinted ground. */ .card-lead { background: var(--teal-tint); border-color: transparent; } .card-lead h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); } @media (max-width: 860px) { .grid-lead { grid-template-columns: 1fr; } .grid-stagger > * { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .page-fade main, .page-fade .site-header, .page-fade .site-footer, .page-fade.is-leaving main { animation: none !important; } .theme-toggle:hover { transform: none; } } /* ========================================================= 6. JOURNAL FILTERS The journal keeps its own aged-paper world, so these borrow its tokens (--sumi, --rubric) rather than the main site palette. ========================================================= */ .journal-filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.1rem; } .jfilter { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sumi-soft, #4a4237); background: transparent; border: 1px solid var(--sumi-rule, rgba(58,51,43,0.35)); border-radius: 999px; padding: 0.38rem 0.85rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .jfilter:hover { border-color: var(--rubric, #7a2f1a); color: var(--rubric, #7a2f1a); } .jfilter.is-on { background: var(--rubric, #7a2f1a); border-color: var(--rubric, #7a2f1a); color: #f7f1e3; } .journal-count { margin: 0 0 1.6rem; font-size: 0.82rem; font-style: italic; color: var(--sumi-soft, #4a4237); opacity: 0.8; } /* the category, set as a small rubric inside the existing meta line */ .jcat { color: var(--rubric, #7a2f1a); font-weight: 600; letter-spacing: 0.06em; } .journal-item[hidden] { display: none; } /* ========================================================= 7. THE SHORT VERSION About is the longest and most trust-critical page, and it was an unbroken narrative. This gives a scanner an entry point without gutting the prose for the person who wants to read it. A dated sequence is genuinely chronological, so the ordering here carries real information rather than decorating the list. ========================================================= */ .short-version { margin: 0 0 2.6rem; padding-left: 1.4rem; border-left: 2px solid var(--teal); display: grid; gap: 1rem; } .short-version li { display: grid; gap: 0.15rem; } .short-version .sv-when { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); } .short-version .sv-what { font-size: 1rem; line-height: 1.5; color: var(--ink); } .short-version .sv-what strong { font-weight: 600; } /* The Zhuangzi passage. It previously carried an inline --ink-soft, which assumed a light ground; on the graphite section it went unreadable. */ .zhuangzi { margin-top: 1.3rem; padding-left: 1.1rem; border-left: 2px solid rgba(255,255,255,0.18); font-style: italic; font-size: 0.95rem; line-height: 1.65; max-width: 62ch; color: rgba(255,255,255,0.72); } .zhuangzi span { color: rgba(255,255,255,0.5); } .zhuangzi em { color: rgba(255,255,255,0.6); } /* ========================================================= 8. TEXT ON PERMANENTLY-DARK SECTIONS style.css uses --white for two different jobs: a card SURFACE and TEXT sitting on a dark band. The dark theme redefines --white as a raised dark surface, which is right for cards and wrong for text — it turned the phone number, the CTA headings and the light buttons dark-on-dark. Those bands stay dark in both themes, so their contents are pinned to literal white here rather than to the token. ========================================================= */ :root[data-theme="dark"] .bg-teal, :root[data-theme="dark"] .bg-teal h1, :root[data-theme="dark"] .bg-teal h2, :root[data-theme="dark"] .bg-teal h3, :root[data-theme="dark"] .bg-forest h1, :root[data-theme="dark"] .bg-forest h2, :root[data-theme="dark"] .bg-forest h3, :root[data-theme="dark"] .bg-forest h4, :root[data-theme="dark"] .bg-graphite h1, :root[data-theme="dark"] .bg-graphite h2, :root[data-theme="dark"] .bg-graphite h3, :root[data-theme="dark"] .bg-graphite h4, :root[data-theme="dark"] .contact-row a, :root[data-theme="dark"] .site-footer .logo, :root[data-theme="dark"] .footer-notice strong, :root[data-theme="dark"] .footer-nav a:hover, :root[data-theme="dark"] .footer-notice a:hover, :root[data-theme="dark"] .btn-outline-light, :root[data-theme="dark"] .btn-outline-light:hover, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn-primary:hover, :root[data-theme="dark"] a.tag:hover, :root[data-theme="dark"] a.tag:focus-visible { color: #ffffff; } /* the light button on a dark band must stay light */ :root[data-theme="dark"] .btn-light { background: #f2f5f0; color: #23302a; } :root[data-theme="dark"] .btn-light:hover { background: #ffffff; color: #16191a; } :root[data-theme="dark"] a.tag:hover, :root[data-theme="dark"] a.tag:focus-visible { background: var(--teal); border-color: var(--teal); color: #16191a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-teal, :root:not([data-theme="light"]) .bg-teal h1, :root:not([data-theme="light"]) .bg-teal h2, :root:not([data-theme="light"]) .bg-teal h3, :root:not([data-theme="light"]) .bg-forest h1, :root:not([data-theme="light"]) .bg-forest h2, :root:not([data-theme="light"]) .bg-forest h3, :root:not([data-theme="light"]) .bg-forest h4, :root:not([data-theme="light"]) .bg-graphite h1, :root:not([data-theme="light"]) .bg-graphite h2, :root:not([data-theme="light"]) .bg-graphite h3, :root:not([data-theme="light"]) .bg-graphite h4, :root:not([data-theme="light"]) .contact-row a, :root:not([data-theme="light"]) .site-footer .logo, :root:not([data-theme="light"]) .footer-notice strong, :root:not([data-theme="light"]) .footer-nav a:hover, :root:not([data-theme="light"]) .footer-notice a:hover, :root:not([data-theme="light"]) .btn-outline-light, :root:not([data-theme="light"]) .btn-outline-light:hover, :root:not([data-theme="light"]) .btn-primary, :root:not([data-theme="light"]) .btn-primary:hover { color: #ffffff; } :root:not([data-theme="light"]) .btn-light { background: #f2f5f0; color: #23302a; } :root:not([data-theme="light"]) .btn-light:hover { background: #ffffff; color: #16191a; } :root:not([data-theme="light"]) a.tag:hover, :root:not([data-theme="light"]) a.tag:focus-visible { background: var(--teal); border-color: var(--teal); color: #16191a; } } /* ========================================================= 9. PER-PAGE GHOST PALETTES The fracture is the same gesture everywhere; the colour it fractures INTO changes per page. Same move, different key — which is what makes a system read as a system rather than a repeated effect. Front layer stays brand green throughout so the headline itself never loses its identity. ========================================================= */ body[data-page="about"] .page-hero .dl-a { color: #a24936; } /* rust — the road */ body[data-page="about"] .page-hero .dl-b { color: #c69a3e; } /* gold */ body[data-page="approach"] .page-hero .dl-a { color: #4f8478; } /* teal — cool, philosophical */ body[data-page="approach"] .page-hero .dl-b { color: #83bca9; } body[data-page="people"] .page-hero .dl-a { color: #d36135; } /* paprika — alive */ body[data-page="people"] .page-hero .dl-b { color: #83bca9; } body[data-page="rates"] .page-hero .dl-a { color: #c69a3e; } /* gold + rust — earthy, plain */ body[data-page="rates"] .page-hero .dl-b { color: #a24936; } body[data-page="faq"] .page-hero .dl-a { color: #7d8a80; } /* muted — utilitarian */ body[data-page="faq"] .page-hero .dl-b { color: #a9c4b0; } body[data-page="journal"] .page-hero .dl-a { color: #7a2f1a; } /* rubric — the journal's own red */ body[data-page="journal"] .page-hero .dl-b { color: #c69a3e; } body[data-page="california"] .page-hero .dl-a { color: #3f7f8c; } /* coastal blue — distance */ body[data-page="california"] .page-hero .dl-b { color: #83bca9; } body[data-page="la"] .page-hero .dl-a { color: #d36135; } /* smog-orange dusk */ body[data-page="la"] .page-hero .dl-b { color: #c69a3e; } body[data-page="privacy"] .page-hero .dl-a { color: #8a9490; } /* quietest on the site */ body[data-page="privacy"] .page-hero .dl-b { color: #aab6ae; } /* 404 is the one place the brand guide's psychedelic accent earns its keep: plum against paprika, on the page where being lost IS the subject. Used exactly once across the whole site, which is what makes it land. */ body[data-page="lost"] .page-hero .dl-a { color: #d36135; } body[data-page="lost"] .page-hero .dl-b { color: #5b3a5e; } /* ========================================================= 9. BOOK-OR-EMAIL PAIR The calendar is a high-commitment first move. Pairing it with a written route catches the person who isn't ready to pick a slot. The wrapper carries the auto margin so the pair still pins to the bottom of an equal-height rate card. ========================================================= */ .rate-card .btn-pair { margin-top: auto; } .btn-pair { display: flex; flex-wrap: wrap; gap: 0.6rem; } .btn-pair .btn { flex: 1 1 auto; justify-content: center; } .btn-pair-note { margin: 0.7rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); } /* ========================================================= 10. THE SHORT VERSION About is the longest page on the site and the one that carries the most trust weight. Readers who scan were getting nothing; this gives them the whole case in four lines without shortening the real thing. ========================================================= */ .short-version { margin-top: 2rem; padding: clamp(1.3rem, 2.6vw, 1.9rem); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--white); max-width: 62ch; } .sv-label { margin: 0 0 1rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-dark); } .short-version .fit-list { gap: 0.85rem; } .short-version .fit-list li { font-size: 0.95rem; } .short-version .fit-list strong { display: inline; } .sv-note { margin: 1.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }