/* ============================================================================ japandi-web.css — Japandi, ported off the reveal/lectern theme for a standalone web page (the ikigai "coming soon" page). Japanese + Scandinavian restraint and negative space (ma): Ground shoji-paper greige Ink warm sumi near-black Accent aizome indigo (functional, links/UI) Warm shu vermilion — the SINGLE warm gesture (the hanko seal) Notes for maintainers · --seal is the seal BLOCK fill; --warm is vermilion used as text/marker. They share a hue, but --warm lightens in dark mode so vermilion text keeps WCAG-AA contrast on the sumi ground (true vermilion on sumi is only ~3:1). The seal block keeps its true colour in both themes. · Muted/accent are tuned for >= 4.5:1 body-text contrast in both themes. · Fonts loaded in the page : Zen Kaku Gothic New / Inter / IBM Plex Mono. ============================================================================ */ :root { --bg: #f3f1ec; /* shoji greige */ --fg: #2a2723; /* sumi ink */ --muted: #6f695e; /* accessible muted (~4.9:1 on paper) — text */ --accent: #46586b; /* aizome indigo — functional (links, UI) */ --seal: #b8472f; /* shu vermilion — seal block fill */ --warm: #b8472f; /* vermilion as text/marker (lightens in dark) */ --rule: #e2ded4; /* hairline dividers / quiet borders */ --seal-ink: #f6f4ef; /* seal glyphs stay paper-toned in any theme */ --font-display: "Zen Kaku Gothic New", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", Menlo, monospace; } @media (prefers-color-scheme: dark) { :root { --bg: #26241f; /* sumi slide ground */ --fg: #f1efe8; --muted: #a39c8f; /* ~5.7:1 on sumi */ --accent: #99a3ae; /* lightened aizome (~6.1:1) */ --warm: #d77a5f; /* lightened vermilion (~5.0:1) */ --rule: #403d34; /* --seal and --seal-ink are intentionally unchanged: the warm stamp reads identically in both themes. */ } } * { box-sizing: border-box; } html { font-size: 100%; } /* honor user font-size for rem scaling */ html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100svh; } /* faint shoji-paper grain, well below the noise threshold */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { body::before { opacity: .3; } } /* keyboard skip link */ .skip { position: absolute; left: -999px; top: 0; z-index: 9; background: var(--accent); color: var(--bg); padding: .6em 1em; border-radius: 0 0 6px 0; font-family: var(--font-mono); font-size: .85rem; } .skip:focus { left: 0; } /* ---- page frame: generous "ma" -------------------------------------------- */ .page { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: clamp(28px, 5vw, 64px) clamp(28px, 7vw, 116px); } /* ---- top rail ------------------------------------------------------------- */ .rail { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .kicker { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .24em; font-size: .9375rem; color: var(--muted); margin: 0; } .kicker .dot { color: var(--warm); padding: 0 .5em; } .vert { writing-mode: vertical-rl; font-family: var(--font-display); letter-spacing: .34em; line-height: 1; color: var(--muted); font-size: 14px; opacity: .85; } /* ---- hero ----------------------------------------------------------------- */ .hero { align-self: center; justify-self: start; max-width: min(620px, 100%); } /* vermilion hanko — the single warm gesture; a 2x2 carved stamp. Glyphs read right-column-down then left-column-down: 生 き 甲 斐. */ .seal { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: clamp(96px, 12vw, 124px); aspect-ratio: 1; background: var(--seal); color: var(--seal-ink); border-radius: 7px; font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(1.875rem, 4vw, 2.5rem); margin-bottom: clamp(20px, 3vw, 30px); box-shadow: 0 1px 0 rgba(0, 0, 0, .05); transform-origin: 50% 60%; } .seal span { display: grid; place-items: center; } .seal .s1 { grid-area: 1 / 2; } /* 生 top-right */ .seal .s2 { grid-area: 2 / 2; } /* き bottom-right */ .seal .s3 { grid-area: 1 / 1; } /* 甲 top-left */ .seal .s4 { grid-area: 2 / 1; } /* 斐 bottom-left */ .wordmark { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.5rem, 11vw, 6.25rem); line-height: .94; letter-spacing: -.01em; margin: 0; color: var(--fg); } /* short vermilion rule gesture */ .rule { width: 56px; height: 2px; background: var(--warm); border: 0; margin: clamp(20px, 3vw, 28px) 0 clamp(18px, 2.6vw, 24px); } .thesis { font-size: clamp(1.1875rem, 2.3vw, 1.5625rem); line-height: 1.5; margin: 0; max-width: 34ch; } .thesis em { color: var(--warm); font-style: normal; } .subthesis { font-size: clamp(.9375rem, 1.7vw, 1.125rem); line-height: 1.55; color: var(--muted); margin: .7em 0 0; max-width: 42ch; } /* outlined tags — Japandi chips: outlined, never filled */ .tags { display: flex; flex-wrap: wrap; gap: .55em; margin: clamp(26px, 3.4vw, 34px) 0 0; } .tag { display: inline-block; border: 1px solid var(--rule); padding: .4em .95em; font-family: var(--font-mono); font-size: .8125rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); } .tag.warm { border-color: var(--warm); color: var(--warm); } .tag.ink { border-color: var(--fg); color: var(--fg); } /* GitHub call-to-action — functional, so aizome indigo (not the warm seal) */ .cta { display: inline-flex; align-items: center; gap: .62em; margin-top: clamp(30px, 4vw, 40px); font-family: var(--font-mono); font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-decoration: none; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: .85em 1.3em; border-radius: 6px; transition: background-color .35s ease, color .35s ease, border-color .35s ease; } .cta i { font-size: 1.25em; } .cta .arrow { transition: transform .35s ease; } .cta:hover, .cta:focus-visible { background: var(--accent); color: var(--bg); border-color: var(--accent); } .cta:hover .arrow, .cta:focus-visible .arrow { transform: translateX(3px); } .cta:focus-visible { outline: 2px solid var(--warm); outline-offset: 3px; } /* ---- footer folio --------------------------------------------------------- */ .folio { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em; color: var(--muted); } .folio .ja { font-family: var(--font-display); letter-spacing: .12em; } .folio .ja b { color: var(--warm); font-weight: 700; } /* ---- one orchestrated entrance — the stamp press -------------------------- */ @media (prefers-reduced-motion: no-preference) { .anim { opacity: 0; } .seal { animation: press .62s cubic-bezier(.2, .8, .25, 1) .15s both; } .lift { animation: lift .7s cubic-bezier(.2, .7, .2, 1) both; } .d1 { animation-delay: .42s; } .d2 { animation-delay: .52s; } .d3 { animation-delay: .62s; } .d4 { animation-delay: .74s; } .d5 { animation-delay: .86s; } @keyframes press { 0% { opacity: 0; transform: scale(1.06) translateY(-2px); } 55% { opacity: 1; transform: scale(.985); } 100% { opacity: 1; transform: scale(1); } } @keyframes lift { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } } @media (max-width: 560px) { .hero { max-width: 100%; } .vert { display: none; } }