/* ============================================================ OTERA STAY — design tokens and base components The single source of truth. Every reference file links this. Nothing below should be re-declared inside a component. ============================================================ */ :root{ /* ---------- colour ---------- One ink colour: 深緑. Text never changes colour to show hierarchy — it changes size or weight. The only exceptions are the 柿渋 accent on eyebrows and inline links, and white text on dark panels. */ --fukamidori:#26372B; /* 深緑 all text, buttons, icons, dark panels */ --wakagoke:#92AA88; /* 若苔 hover state, CTA panels, links on dark */ --washi:#EFF0EA; /* 和紙 page ground */ --kawaishi:#D4D6CB; /* 川石 dividers, aid fills, type-4 link ground */ --koishi:#A8A59A; /* 磨かれた小石 illustration shading, active map region */ --kakishibu:#9E5A3C; /* 柿渋 accent: eyebrows, inline links, bullets */ --white:#FFFFFF; /* ---------- type ---------- */ --font-ja:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif; --font-mincho:"Zen Old Mincho","Hiragino Mincho ProN",serif; --font-latin:"Figtree",system-ui,sans-serif; /* titles — size only; the level is decided by the document, not the look */ --t-h1:40px; --t-h2:30px; --t-h3:25px; --t-h4:20px; /* text roles — pick a role, never a loose number. lead : the paragraph under an H2 when the section is a main feature body : everything ordinary note : supporting lines, captions, instructions One lead per section at most. */ --t-lead:17px; --t-body:15px; --t-note:13px; --t-eyebrow:13px; /* the Latin mini-title above a heading */ --t-micro:11px; /* letterspaced Latin micro-labels only — the rōmaji under a temple name, the English line on a card, EN／JP. Never for Japanese, never for a sentence. */ --w-normal:400; --w-emphasis:600; /* a line that must not be missed. Weight only — never a different colour or size. */ --lh-title:1.4; --lh-body:2; /* ---------- radius ---------- */ /* The ↗ arrow, inlined. It is a mask, and a mask image is CORS-checked: a file:// reference silently fails and the arrow disappears in local preview. Inlining also means tokens.css can be moved anywhere. */ --src-arrow-out:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABCCAQAAABNqBheAAADpUlEQVR42s3ZS2xUVRzH8U+nU5hShT4CCJaXQlpoaafSEVEwJrpwZeLKhe7w/YxKcOVj78KFj5i41MSlSzbGmOgGUBQUAzUgCcYQqhikgbZT5rhgGuZC8c7MvZfxf5Obeyb/c76/+///zz33nuGKtam13AKtqEf7Aq1cZKx8xCMf8bji3zF/OW6xsq3WmHKbojntSrrN2GTQtGVKOlSMWWNGvzFlBSV9ygZsMaPXdou0G7PetHW2mdNlhz4VQ4bNWuleBR1K7jBjo5KKpXY516bb++6xX1B01nEjeu3XY4tjzhlRcdg6GxwSbHXWSZv1OaDHJidMGlXxk7XWOIJB55y0WbcfLLXRKX8ZVvGLfqsdxYC/nTLgVkd0e5dBpwXBZRVBcFEQzAqCYEYQXKq2KjWtcsRjptq6LAima67nx5qNeMz7P5pX1hPJT+fV/GARKESyW4jkeFHNeX6UxZEROyIj5iL+5Rymtc5CTts19X2TLXfdBLvpEWix/S8EtDIFlZw2obU1EFqdgtD6FLS8CAutFZAzBS6AS9WaqP1tziVwHlx0uab1D5g1hblmBOTN+dycMX+aMKDXIYuN+NWkYW0OW2WDI6YVTfrNnXocVjDolLOG8LOV+v3odo83MwsoGMYK45agaD3WGkWnuyzHgAH0KOrCkHVYbRh5Wy3HKg94tbrANnY8dGNtjRRnpz3V94hGjwfz/xWcOq3fbnur7xENpyCfuIz77fZGk/gUVsNk+MSrYWJ8MgEp4JMISAXfvICU8M0WYf34M1lEoH78fl+lH4H68Qe96WD8WtAo/u06H7oHPKzLEzFe92eJvwW7Y/x2ZYvnyRjPndnieSotAc3h4wXcly2ep9MQ0DyeZ5ILSIKPF7AjW3xiAUnxPJtEQHI8z8X03J4tPoGAdPA835yAtPC8ENP/7mzxTQlIE9+EgHTxvBgzSilbPC81IiB9fLyA8WzxDQjIBs/L9QnICs8rMeNty2PQY3W/aL/l2+r+UWqbVJ0eyRAft88ScjqMtururwi44GNfKLcEX2OfpFp6Vy1u76w4/234ga9bcvc134YrfWgq1buH12IiMBp9FO9LGc/rjQhg1KeRKCTFxwsYubZDh89SxLMnRsDw9V3GfZkanr31r4ZXbYmPfJMKnndMOSkITpgSnHFaMG1CRXBacaGt2ove0+toKhNvnxW+d95OfzhuSI/vdBo14Xcl7Y7dqGN6/6Is0Ved5rCsGtfl8+d/AQ3H1eyPOvizAAAAAElFTkSuQmCC"); /* ── SPACING ────────────────────────────────────────────── Six values, all multiples of 10. If a spacing is not one of these six it is wrong — round to the nearest. xs eyebrow → title, and inside a control sm rows of a divided list (top and bottom), grid gaps md a title → the paragraph directly under it lg a title block → the content below it xl two groups inside one section 2xl section padding, top and bottom These do not change with screen size. Only --gutter does. */ --src-pattern:url("../img/pattern.png"); /* the accordion icons, drawn by hand and inlined for the same reason as the arrow: a mask image is CORS-checked and a file:// reference fails. Masked rather than placed as so they take the control's current colour. */ --src-icon-plus:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAQAAAAmTKJWAAAARklEQVR42u3XsQkAMAgEQM3+OycLWCiEpLkvBTmwEM2YZBe17LeveBgYDAaDwWCwH1iWF5MxwmCw3gbxn8FgMBgMBoPdywFsvANpdEKmcgAAAABJRU5ErkJggg=="); --src-icon-close:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAQAAACQEyoRAAAA70lEQVR42rXXyxHDIAwE0O06ISlgoTKXRS6ZOAw/fRA+gt5wwIgF/scbhH0QaTb1QkU140RFHeMJ9fvRDA/xG7bgbKob/NlMaXF21T/80U1pcA6r0xyW4pxWJ6BMJ/c4F7UFALIR38JWXATv8OyBtbgK1uBqWIqbYAluhnf45YF3uAu24EVzTeYoWIMXS0vKUbAEL44mvTxuF1ztf71rRsFmnMITwihYjVP5NzIKFuM03nz0wLv7mh4YVpwHeiO1MB1r1TsRr+fh1xM9sKiOQS9VjhLBsff1DD+QCvqQdDDLhCawO5AG5MbQtHs8o38AaZjFi6UmLQYAAAAASUVORK5CYII="); --sp-xs:10px; --sp-sm:20px; --sp-md:30px; --sp-lg:40px; --sp-xl:60px; --sp-2xl:80px; --radius:10px; /* every card, panel and image */ --radius-pill:999px; /* buttons only */ /* ---------- motion ---------- Three durations, two curves. Nothing else. */ --t-fast:200ms; /* hover: colour, a 4px nudge */ --t-base:350ms; /* the default for anything visible */ --t-slow:600ms; /* a card opening, a panel expanding */ --ease-move:cubic-bezier(.22,.61,.36,1); /* anything that travels */ --ease-fade:ease; /* anything that only changes colour */ /* ---------- grid ---------- 1440 design width, 1200 content, 120 gutters. The content column never exceeds 1200: wider screens get wider gutters. */ --page-max:1440px; --content:1200px; --gutter:120px; } /* ---------- breakpoints ---------- Four, and only four. Everything responsive hangs off these. */ @media (max-width:1280px){ :root{ --gutter:56px } } @media (max-width:1024px){ :root{ --gutter:40px; --t-h1:32px; --t-h2:26px; --t-h3:21px; --t-h4:18px; --t-lead:16px } } @media (max-width:768px){ :root{ --gutter:24px; --t-h1:28px; --t-h2:23px; --t-h3:19px; --t-h4:17px; --t-lead:15px; --t-body:14px } } @media (max-width:480px){ :root{ --gutter:20px; --t-h1:25px; --t-h2:21px; --t-h3:18px } } /* ============================================================ SECTION Every block of content is a section with the same padding. ============================================================ */ .o-section{padding-block:var(--sp-2xl)} .o-section__inner{max-width:var(--page-max);margin-inline:auto; padding-inline:var(--gutter)} .o-section--washi{background:var(--washi)} .o-section--white{background:var(--white)} .o-section--dark{background:var(--fukamidori);color:var(--white)} /* featured: 若苔 always carries the paper texture — see GENERAL-RULES.md */ .o-section--moss{background-color:var(--wakagoke);color:var(--fukamidori); background-image:var(--src-pattern);background-repeat:repeat} /* ============================================================ TITLES Heading level comes from the document outline (one H1 per page, H2 for a section, H3 for a part of it, never skipped). Title style comes from the layout. They are independent. ============================================================ */ .o-eyebrow{font-family:var(--font-latin);font-size:var(--t-eyebrow); font-weight:700;letter-spacing:.18em;color:var(--kakishibu);margin:0 0 10px} .o-eyebrow--light{color:var(--white)} .o-title{font-family:var(--font-mincho);font-weight:600;color:var(--fukamidori); line-height:var(--lh-title);letter-spacing:.03em;margin:0} .o-title--h1{font-size:var(--t-h1)} .o-title--h2{font-size:var(--t-h2)} .o-title--h3{font-size:var(--t-h3)} .o-title--h4{font-size:var(--t-h4)} .o-title--light{color:var(--white)} /* centred: a 150px rule either side. left-aligned: one rule to the container edge */ .o-title--center{display:flex;align-items:center;justify-content:center;gap:24px; text-align:center} .o-title--center::before,.o-title--center::after{content:"";height:2px;width:150px; background:currentColor;flex:0 0 auto} .o-title--rule{display:flex;align-items:center;gap:24px} .o-title--rule::after{content:"";height:2px;flex:1 1 auto;background:currentColor} /* ============================================================ TEXT ============================================================ */ .o-lead{font-size:var(--t-lead);line-height:var(--lh-body);margin:0} .o-body{font-size:var(--t-body);line-height:var(--lh-body);margin:0} .o-note{font-size:var(--t-note);line-height:1.95;margin:0} .o-em{font-weight:var(--w-emphasis)} /* at most one per paragraph */ /* ============================================================ BUTTONS A button is an action, and carries no forward arrow. THE ONE EXCEPTION IS ABSOLUTE: a button whose destination is outside this site ALWAYS carries the ↗ arrow — every variant, every size, no judgement involved. Add .o-btn--out. Every arrow, → and ↗ alike, moves FORWARD on hover and nothing else. The ↗ does not also lift. Where two sit together, the more important one takes the default state and the other takes the reverse. ============================================================ */ .o-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; min-width:257px;height:50px;padding:0 30px;border-radius:var(--radius-pill); font-family:var(--font-ja);font-size:var(--t-body);font-weight:500; letter-spacing:.04em;text-decoration:none;white-space:nowrap;border:0; cursor:pointer; transition:background var(--t-fast) var(--ease-fade), color var(--t-fast) var(--ease-fade), border-color var(--t-fast) var(--ease-fade)} .o-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px} /* — on a light ground (和紙 / 白 / 川石) — */ .o-btn--light{background:var(--fukamidori);color:var(--washi)} .o-btn--light:hover,.o-btn--light:focus-visible{background:var(--wakagoke);color:var(--fukamidori)} .o-btn--light.is-second{background:var(--wakagoke);color:var(--fukamidori)} .o-btn--light.is-second:hover,.o-btn--light.is-second:focus-visible{background:var(--fukamidori);color:var(--washi)} /* — on 深緑 — */ .o-btn--dark{background:var(--white);color:var(--fukamidori)} .o-btn--dark:hover,.o-btn--dark:focus-visible{background:var(--wakagoke);color:var(--fukamidori)} .o-btn--dark.is-second{background:var(--wakagoke);color:var(--fukamidori)} .o-btn--dark.is-second:hover,.o-btn--dark.is-second:focus-visible{background:var(--white);color:var(--fukamidori)} /* — on 若苔 — */ .o-btn--moss{background:var(--fukamidori);color:var(--white)} .o-btn--moss:hover,.o-btn--moss:focus-visible{background:var(--white);color:var(--fukamidori)} .o-btn--moss.is-second{background:var(--white);color:var(--fukamidori)} .o-btn--moss.is-second:hover,.o-btn--moss.is-second:focus-visible{background:var(--fukamidori);color:var(--white)} /* — in the key visual, over photography — */ .o-btn--kv{background:var(--wakagoke);color:var(--fukamidori)} .o-btn--kv:hover,.o-btn--kv:focus-visible{background:var(--white);color:var(--fukamidori)} .o-btn--kv.is-second{background:var(--white);color:var(--fukamidori)} .o-btn--kv.is-second:hover,.o-btn--kv.is-second:focus-visible{background:var(--wakagoke);color:var(--fukamidori)} /* — leaves the site: ALWAYS gets the ↗ arrow — Combine with any variant: class="o-btn o-btn--light o-btn--out". The arrow is masked, not an , so it takes the button's current text colour. Every variant inverts its colours on hover, and a fixed-colour PNG would disappear against one of the two states. */ .o-btn--out::after{content:"";width:12px;height:12px;flex:0 0 12px; background:currentColor; -webkit-mask:var(--src-arrow-out) center/contain no-repeat; mask:var(--src-arrow-out) center/contain no-repeat; transition:transform var(--t-fast) var(--ease-move)} .o-btn--out:hover::after,.o-btn--out:focus-visible::after{ transform:translateX(3px)} /* — the one irregular button: in the global header — */ .o-btn--nav{min-width:0;height:42px;padding:0 24px;font-size:var(--t-note); background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--white); transition:background var(--t-fast) var(--ease-fade), color var(--t-fast) var(--ease-fade)} .o-btn--nav:hover,.o-btn--nav:focus-visible{background:var(--white);color:var(--fukamidori)} /* ============================================================ LINKS Four types. Types 1 and 2 are 柿渋 on light grounds and white on 若苔 or 深緑; everything else about them is identical. ============================================================ */ /* type 1 — inside a paragraph */ .o-link{color:var(--kakishibu);text-decoration:none; transition:color var(--t-fast) var(--ease-fade)} .o-link:hover,.o-link:focus-visible{text-decoration:underline} /* type 2 — standalone on its own line, with a leading arrow */ .o-link-standalone{display:inline-flex;align-items:center;gap:8px; color:var(--kakishibu);text-decoration:none} .o-link-standalone:hover,.o-link-standalone:focus-visible{text-decoration:underline} /* types 1 and 2 on a dark or moss ground */ .o-on-dark .o-link,.o-on-dark .o-link-standalone, .o-on-moss .o-link,.o-on-moss .o-link-standalone{color:var(--white)} /* type 3 — standalone, closes a block and leads to the full page */ .o-link-arrow{display:inline-flex;align-items:center;gap:10px; color:var(--fukamidori);font-size:var(--t-body);text-decoration:none} .o-on-dark .o-link-arrow,.o-on-moss .o-link-arrow{color:var(--white)} /* type 4 — the same job, but seated on a 川石 panel inside a card */ .o-link-panel{display:inline-flex;align-items:center;gap:10px;height:37px; padding:0 13px 0 20px;background:var(--kawaishi);color:var(--fukamidori); font-size:var(--t-note);font-weight:500;text-decoration:none;white-space:nowrap; transition:background var(--t-fast) var(--ease-fade)} .o-link-panel:hover,.o-link-panel:focus-visible{background:var(--wakagoke)} .o-link-arrow:focus-visible,.o-link-panel:focus-visible, .o-link:focus-visible,.o-link-standalone:focus-visible{ outline:2px solid currentColor;outline-offset:3px} /* ============================================================ ARROWS → marks a link. It never appears on a button that stays on the site. ↗ marks anything that leaves the site, button or link. Both nudge 4px on hover; the ↗ nudges up and to the right. ============================================================ */ .o-arrow{width:11px;height:12px;flex:0 0 11px;object-fit:contain; transition:transform var(--t-fast) var(--ease-move)} .o-arrow--back{transform:scaleX(-1)} /* a previous control */ a:hover .o-arrow,a:focus-visible .o-arrow, button:hover .o-arrow,button:focus-visible .o-arrow{transform:translateX(4px)} a:hover .o-arrow--back,button:hover .o-arrow--back{transform:scaleX(-1) translateX(4px)} .o-arrow-out{width:12px;height:12px;flex:0 0 12px;object-fit:contain; transition:transform var(--t-fast) var(--ease-move)} a:hover .o-arrow-out,a:focus-visible .o-arrow-out, button:hover .o-arrow-out,button:focus-visible .o-arrow-out{transform:translateX(3px)} /* assets: arrow.png / arrow-white.png → arrow-outside.png / arrow-outside-white.png ↗ Use the white file on 深緑 and 若苔 grounds and over photography. */ /* ============================================================ SOCIAL ============================================================ */ .o-sns{display:inline-flex;gap:14px} .o-sns a{display:grid;place-items:center;width:34px;height:34px;color:var(--white); transition:color var(--t-fast) var(--ease-fade)} .o-sns a:hover,.o-sns a:focus-visible{color:var(--wakagoke)} /* ============================================================ LAYOUT ============================================================ */ .o-wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)} .o-card{background:var(--white);border-radius:var(--radius);overflow:hidden} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;transition-duration:.01ms !important; scroll-behavior:auto !important} }