/* ============================================================================ The Red Dot School ・レッドドットスクール styles.css — shared stylesheet for the multi-file site ---------------------------------------------------------------------------- Loads webfonts from Google Fonts CDN (with unicode-range partitioning, so browsers only download the JA glyph subsets actually used per page). Defines the design tokens and the base "rds-page" register shared across all deliverable pages. Page-specific styles live inline in each HTML for simplicity; this stylesheet holds everything that is shared. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Zen+Old+Mincho:wght@400;500;700&display=swap"); /* ============================================================================ Design tokens Measured from brandbook-v3.css (v0.5) and the live Webflow CSS. ========================================================================== */ :root{ /* Core brand */ --red:#E04A14; /* Vermillion ・ "The Red Dot" / drawing ink */ --red-dark:#B83A0E; --lime:#D0FF00; /* Chartreuse ・ highlight / active state */ --ink:#1A1A1A; /* Body type */ --paper:#FFFFFF; /* Page */ --cream:#F4F0E6; /* Drawing field / off-white */ --backdrop:#DEDAD0; /* Construction-line + text grays */ --muted:#5D6C7B; --steel:#5D6C7B; --slate:#758696; --gray:#C3C3C3; --rule:rgba(26,26,26,0.12); --ink-soft:#333333; --g262:#262626; --g333:#333333; --g464:#464646; --n-c8:#C8C8C8; --n-d6:#D6D6D6; --n-dd:#DDDDDD; --n-e2:#E2E2E2; /* Display + flash palette (RDS Pure register web behaviours) */ --p-red:#FF0000; --p-blue:#0073FF; --p-coral:#FF6060; --p-peri:#8390FA; --p-gold:#FAC748; --p-pink:#F88DAD; --p-green:#5FB44A; --p-teal:#37B6C4; /* Heading-shadow helper (alternates per-section in some pages) */ --hs:color-mix(in srgb, var(--red) 20%, transparent); /* Type families (pair EN with JP face of matching weight) */ --grotesk:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; /* EN display sans */ --serif:"EB Garamond","Adobe Garamond Pro",Georgia,serif; /* EN body serif */ --jp:"Noto Sans JP",sans-serif; /* JP sans */ --jpserif:"Zen Old Mincho","Hina Mincho",serif; /* JP serif */ --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; /* Refined-register defaults */ --measure:820px; } /* ============================================================================ Resets + base ========================================================================== */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;padding:0;background:var(--paper);color:var(--ink); font-family:var(--serif);font-size:18px;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} a{color:var(--red);text-decoration:none;} img{max-width:100%;height:auto;} svg{max-width:100%;height:auto;} /* ============================================================================ Shared "Refined register" page chrome (used by index + critical-initiatives) Mirrors rds-page.css from the original deliverables. ========================================================================== */ /* Shared content column. Every direct child of except the hero and the page footer is centered to a readable measure. */ body.rds-page > :not(.rds-hero):not(.rds-foot){max-width:var(--measure);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;} /* Hero (white, editorial; mirrors the dashboard hero) */ .rds-hero{background:#fff;color:var(--ink);padding:64px 0 52px;text-align:center;} .rds-hero .inner{max-width:1140px;margin:0 auto;padding:0 32px;} .rds-hero .kicker{font-family:var(--mono);font-size:13px;letter-spacing:0.22em; text-transform:uppercase;color:var(--red);margin:0 0 22px;} .rds-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(48px,9vw,120px); line-height:1.02;margin:0;letter-spacing:-0.01em;text-transform:uppercase;color:var(--ink-soft);text-shadow:none;text-wrap:balance;} .rds-hero h1 .letter{transition:color .1s;cursor:default;} .rds-hero .h1-jp{font-family:var(--jp);font-weight:700;font-size:clamp(22px,3.6vw,38px); line-height:1.18;margin:18px auto 0;color:var(--ink-soft);letter-spacing:0.01em;max-width:24ch;text-wrap:balance;} .rds-hero .h1-jp .letter{transition:color .1s;cursor:default;} .rds-hero .subtitle{font-family:var(--serif);font-style:italic;font-size:21px; line-height:1.5;color:var(--muted);margin:26px auto 0;max-width:62ch;} /* Outline / TOC */ nav#TOC{margin:0 auto;padding:26px 0 28px;border-top:2px solid var(--red);border-bottom:1px solid var(--rule);} nav#TOC #toc-title{display:none;} nav#TOC::before{content:"Outline / \76EE\6B21";display:block;font-family:var(--mono); font-size:13px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);margin:0 0 14px;} nav#TOC ul{list-style:none;padding-left:0;margin:0;} nav#TOC ul ul{padding-left:20px;margin:2px 0 6px;} nav#TOC li{margin:4px 0;} nav#TOC a{font-family:var(--grotesk);font-size:15px;color:var(--ink-soft);font-weight:600;} nav#TOC ul ul a{font-size:13.5px;color:var(--muted);font-weight:400;} nav#TOC a:hover{color:var(--red);} /* Headings */ body.rds-page h1, body.rds-page h2, body.rds-page h3, body.rds-page h4{font-family:var(--grotesk);letter-spacing:-0.01em;color:var(--ink-soft);} body.rds-page h1.title{display:none;} .rds-body h1:not(.title){font-size:30px;font-weight:700;margin:48px auto 8px;padding-top:14px; border-top:2px solid var(--red);text-shadow:0.05em 0.06em 0 var(--hs);} .rds-body h2{font-size:24px;font-weight:700;margin:42px auto 6px;line-height:1.08;text-shadow:0.05em 0.06em 0 var(--hs);} .rds-body h3{font-size:19px;font-weight:600;margin:28px auto 4px;color:var(--red-dark);} .rds-body h4{font-size:14px;font-weight:600;margin:22px auto 2px;font-family:var(--mono); text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);} body.rds-page h2 .jp, body.rds-page h3 .jp{display:block;font-family:var(--jp);font-weight:inherit;font-size:1em;color:inherit;margin-top:5px;letter-spacing:0.01em;} /* Body copy, lists, quotes, code, tables */ body.rds-page p{margin:15px auto;} body.rds-page strong{font-weight:600;} body.rds-page em{font-style:italic;} body.rds-page ul, body.rds-page ol{margin:14px auto;padding-left:1.4em;} body.rds-page li{margin:6px 0;} .d-jp{display:block;font-family:var(--jpserif);color:inherit;margin-top:5px;line-height:1.55;font-style:normal;} body.rds-page code{font-family:var(--mono);font-size:0.86em;background:rgba(26,26,26,0.06);padding:1px 5px;border-radius:3px;white-space:pre-wrap;} body.rds-page pre{background:var(--ink);color:var(--cream);padding:16px 20px;border-radius:4px;overflow:auto;} body.rds-page pre code{background:none;color:inherit;padding:0;} body.rds-page blockquote{border-left:3px solid var(--red);margin:18px auto;padding:2px 0 2px 20px;color:var(--muted);font-style:italic;} body.rds-page blockquote p{margin:8px auto;} body.rds-page hr{border:0;border-top:1px solid var(--rule);margin:38px auto;} body.rds-page table{border-collapse:collapse;width:100%;margin:22px auto;font-family:var(--grotesk);font-size:14px; font-variant-numeric:lining-nums tabular-nums;} body.rds-page th, body.rds-page td{border:1px solid var(--rule);padding:8px 11px;text-align:left;vertical-align:top;} body.rds-page thead th{background:var(--cream);font-weight:600;border-bottom:2px solid var(--ink);} body.rds-page tbody tr:nth-child(even){background:rgba(244,240,230,0.5);} body.rds-page caption{margin-bottom:.75em;font-family:var(--mono);font-size:12px;color:var(--muted);} body.rds-page th .dj, body.rds-page td .dj{display:block;font-family:var(--jp);font-size:0.84em;font-weight:400;color:var(--muted);margin-top:3px;letter-spacing:0;} span.smallcaps{font-variant:small-caps;} div.columns{display:flex;gap:min(4vw,1.5em);} div.column{flex:auto;overflow-x:auto;} ul.task-list[class]{list-style:none;padding-left:0;} ul.task-list li input[type="checkbox"]{width:.8em;margin:0 .6em 0 0;vertical-align:middle;} /* Animated X mark (rds-marks.js upgrades .mark > svg) */ .xmark{display:inline-block;width:0.92em;height:0.92em;vertical-align:-0.13em;} .xmark svg{display:block;width:100%;height:100%;overflow:visible;} .xmark line{stroke:var(--red);stroke-width:15;stroke-linecap:square;} /* Inline brand-shape marks (replace shape emojis) */ .mk{display:inline-block;width:0.82em;height:0.82em;vertical-align:-0.08em;margin-right:0.34em;} .mk svg{display:block;width:100%;height:100%;} .mk .fill{fill:var(--red);} .mk .stroke{fill:none;stroke:var(--red);} /* Flashing links (brand behaviour #01) */ @keyframes rds-link-cycle{0%{color:#E8551E;}20%{color:#FAC748;}40%{color:#5FB44A;}60%{color:#37B6C4;}80%{color:#F88DAD;}100%{color:#E8551E;}} body.rds-page main a:not(.card), body.rds-page .rds-body a, body.rds-page .rds-foot a{animation:rds-link-cycle 2s linear infinite;} body.rds-page nav#TOC a{animation:none;} @media (prefers-reduced-motion: reduce){ body.rds-page main a, body.rds-page .rds-body a, body.rds-page .rds-foot a{animation:none;color:var(--red);} } /* Per-letter color-on-hover hooks (the letter split is done in app.js) */ .heading__color .letter, .ltr{transition:color .1s ease;cursor:default;} /* Idle link color-cycle helper used as a highlight on pivotal phrases */ .cycle{font-weight:600;color:var(--red); text-decoration:underline;text-underline-offset:0.16em;text-decoration-thickness:0.05em;} @media (prefers-reduced-motion:no-preference){ .cycle{animation:rds-link-cycle 2s linear infinite;} } @media print{ .cycle{animation:none !important;color:var(--red);} } /* Refined-register page footer */ .rds-foot{background:#fff;color:var(--muted);font-family:var(--mono);font-size:12px; line-height:1.8;padding:44px 0;margin-top:48px;border-top:1px solid var(--rule);} .rds-foot .inner{max-width:var(--measure);margin:0 auto;padding:0 32px;} .rds-foot a{color:var(--red);} @media(max-width:760px){ .rds-hero{padding:44px 0 36px;} body.rds-page > :not(.rds-hero):not(.rds-foot){padding-left:20px;padding-right:20px;} }