/* ============================================================================ Dojominder — site-wide stylesheet. One design language across every page: the ink-on-paper "washi" look from the approved app-page mock, now applied to the homepage, privacy pages and the Shotokan kata reference too. Light + dark via prefers-color-scheme. Fonts (loaded per page ): Shippori Mincho (JP serif) + Zen Kaku Gothic New (sans). Replaces the former app-pages.css and the per-page inline styles. ============================================================================ */ :root{ --sumi:#1b1a17; /* primary ink */ --sumi-soft:#46433d; /* secondary text */ --washi:#f3f2ec; /* page paper */ --washi-2:#eae8df; /* raised surface / footer */ --shu:#b4452b; /* vermilion seal accent */ --shu-deep:#9a3a23; /* accent shadow */ --grey:#86827a; /* muted */ --rule:#dcd8cc; /* hairlines */ --screen:#1e1c19; /* phone device body (constant — depicts hardware) */ --screen-paper:#f6f5ef;/* phone screen (constant) */ --font-jp:"Shippori Mincho", serif; --font-sans:"Zen Kaku Gothic New", system-ui, sans-serif; --maxw:1080px; } @media (prefers-color-scheme: dark){ :root{ --sumi:#e8dfd0; --sumi-soft:#bcb1a0; --washi:#1a1812; --washi-2:#25221b; --shu:#d15a52; --shu-deep:#a8463f; --grey:#a89f90; --rule:#3b362c; /* --screen / --screen-paper deliberately unchanged: the phone mock is a physical device showing the app's own light UI in either color scheme. */ } } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; min-height:100vh; display:flex;flex-direction:column; /* sticky footer on short pages */ background:var(--washi); color:var(--sumi); font-family:var(--font-sans); font-weight:400; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } main{flex:1;} a{color:inherit;} a:focus-visible{outline:2px solid var(--shu);outline-offset:2px;} ::selection{background:var(--shu);color:var(--washi);} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* ---------- shared header (every page) ---------- */ .topbar{ border-bottom:1px solid var(--rule); position:sticky;top:0;z-index:30; background:color-mix(in srgb, var(--washi) 88%, transparent); backdrop-filter:saturate(120%) blur(8px); } .topbar .wrap{display:flex;align-items:center;gap:24px;height:64px;} .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap;} .brand .kanji{font-family:var(--font-jp);font-weight:600;font-size:18px;letter-spacing:.12em;} .brand .word{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--sumi-soft);} .brand:focus-visible{outline:2px solid var(--shu);outline-offset:3px;} .nav{margin-left:auto;display:flex;gap:6px;} .nav a{ text-decoration:none; font-family:var(--font-sans);color:var(--grey); padding:8px 12px;border-radius:2px;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1; transition:color .2s ease; } .nav a .jp{font-family:var(--font-jp);font-size:17px;letter-spacing:.06em;} .nav a .en{font-size:10px;letter-spacing:.18em;text-transform:uppercase;} .nav a:hover{color:var(--sumi);} .nav a[aria-current="page"]{color:var(--sumi);} .nav a[aria-current="page"] .jp{color:var(--shu);} .nav a:focus-visible{outline:2px solid var(--shu);outline-offset:2px;} /* ---------- official store badges (shared) ---------- */ .stores{display:flex;flex-wrap:wrap;gap:14px;align-items:center;} .stores a{display:inline-flex;text-decoration:none;border-radius:3px;transition:transform .18s ease;} .stores a:hover{transform:translateY(-1px);} .stores a:focus-visible{outline:2px solid var(--shu);outline-offset:3px;} /* Both badge assets are trimmed to a tight crop (no baked-in padding), so an equal height yields equal visible size and the left edges line up. */ .store-badge{height:44px;width:auto;display:block;} /* App Store badge ships as a black lockup; invert it so it reads on dark bg. */ @media (prefers-color-scheme: dark){ .store-badge.appstore{ filter:invert(1); } } /* ============================================================================ App landing pages (kata-spinner / keiko-spinner / kotoba-deck) ============================================================================ */ /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);} .hero .wrap{ display:grid;grid-template-columns:auto 1fr;gap:48px; padding-top:72px;padding-bottom:80px;align-items:center; position:relative;z-index:1; } .rail{ writing-mode:vertical-rl;text-orientation:upright; font-family:var(--font-jp);font-weight:700; font-size:clamp(6rem,15vw,12.5rem); line-height:.92;letter-spacing:.04em; color:var(--sumi); user-select:none; } .hero-body{max-width:520px;} .eyebrow{ display:inline-block;font-size:12px;letter-spacing:.3em;text-transform:uppercase; color:var(--grey);margin-bottom:22px; } .titleline{display:flex;align-items:center;gap:16px;margin-bottom:18px;} .seal{ flex:0 0 auto;width:48px;height:48px;background:var(--shu);color:var(--washi); font-family:var(--font-jp);font-weight:600;font-size:26px; display:flex;align-items:center;justify-content:center;border-radius:3px; box-shadow:0 1px 0 var(--shu-deep);transform:rotate(-1.5deg); } h1.appname{ font-family:var(--font-sans);font-weight:700; font-size:clamp(2.1rem,4.4vw,3.1rem);line-height:1.04;letter-spacing:-.01em;margin:0; } .tagline{font-size:18px;color:var(--sumi-soft);margin:0 0 30px;max-width:42ch;} .ghost-kanji{ position:absolute;right:-4%;bottom:-22%;font-family:var(--font-jp);font-weight:800; font-size:46vw;color:var(--sumi);opacity:.025;pointer-events:none;line-height:1;z-index:0; } /* ---------- features ---------- */ .features{padding:78px 0 4px;} .sec-label{ font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey); margin-bottom:38px;display:flex;align-items:center;gap:14px; } .sec-label::after{content:"";flex:1;height:1px;background:var(--rule);} .frows{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;} .frow .fk{font-family:var(--font-jp);font-weight:600;font-size:30px;color:var(--shu);line-height:1;} .frow h3{font-family:var(--font-sans);font-weight:700;font-size:17px;margin:16px 0 8px;letter-spacing:.01em;} .frow p{margin:0;color:var(--sumi-soft);font-size:14.5px;line-height:1.6;} /* ---------- showcase ---------- */ .showcase{padding:84px 0 90px;} .showcase .wrap{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center;} .show-copy{max-width:430px;} .show-copy .ethos{ font-family:var(--font-jp);font-weight:500;font-size:clamp(1.5rem,3vw,2rem); line-height:1.4;letter-spacing:.01em;margin:0 0 18px; } .show-copy p{color:var(--sumi-soft);margin:0;font-size:15px;} /* phone mock */ .phone{ width:268px;height:540px;background:var(--screen);border-radius:34px; padding:11px;box-shadow:0 24px 50px -28px rgba(27,26,23,.55),0 2px 0 rgba(0,0,0,.2); flex:0 0 auto;justify-self:end;position:relative; } /* On dark backgrounds the device nearly matches the page; ring it so it reads. */ @media (prefers-color-scheme: dark){ .phone{box-shadow:0 24px 50px -28px rgba(0,0,0,.7),0 0 0 1px var(--rule);} } .phone::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%); width:64px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);} .pscreen{ background:var(--screen-paper);height:100%;border-radius:24px;overflow:hidden; display:flex;flex-direction:column;color:#1b1a17; } .pbar{display:flex;align-items:center;justify-content:space-between;padding:30px 22px 0;} .pbar .pk{font-family:var(--font-jp);font-weight:600;font-size:15px;color:#1b1a17;letter-spacing:.1em;} .pbar .pmeta{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#86827a;} .pbody{flex:1;display:flex;flex-direction:column;padding:0 22px;} /* kata screen */ .ks-chip{align-self:flex-start;margin-top:20px;font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--shu);border:1px solid var(--shu);padding:3px 8px;border-radius:20px;} .ks-pick{margin-top:auto;margin-bottom:auto;text-align:left;} .ks-pick .jp{font-family:var(--font-jp);font-weight:700;font-size:40px;line-height:1.05;color:#1b1a17;} .ks-pick .ro{font-size:15px;color:#46433d;margin-top:6px;letter-spacing:.04em;} .ks-log{font-size:11px;color:#86827a;border-top:1px solid #dcd8cc;padding:12px 0;} .ks-spin{margin:0 0 26px;background:#1b1a17;color:var(--screen-paper);text-align:center; padding:13px;border-radius:8px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;} /* keiko screen */ .kk-h{margin-top:22px;font-family:var(--font-jp);font-weight:600;font-size:18px;color:#1b1a17;} .kk-sub{font-size:11px;color:#86827a;margin:2px 0 16px;letter-spacing:.08em;} .kk-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid #dcd8cc;font-size:13px;} .kk-row .t{color:#1b1a17;} .kk-row .m{font-size:11px;color:#86827a;font-variant-numeric:tabular-nums;} .kk-row .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--shu);margin-right:9px;vertical-align:middle;} .kk-build{margin:18px 0 26px;border:1px solid #1b1a17;text-align:center;padding:12px;border-radius:8px; font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#1b1a17;} /* kotoba screen */ .kt-counts{display:flex;gap:7px;margin-top:24px;flex-wrap:wrap;} .kt-counts span{font-family:var(--font-jp);font-size:13px;color:#86827a;} .kt-counts span:nth-child(3){color:var(--shu);} .kt-card{margin:auto 0;background:#fff;border:1px solid #dcd8cc;border-radius:14px; padding:26px 22px;box-shadow:0 10px 24px -18px rgba(27,26,23,.4);} .kt-card .jp{font-family:var(--font-jp);font-weight:700;font-size:38px;color:#1b1a17;line-height:1;} .kt-card .ro{font-size:15px;color:var(--shu);margin-top:14px;letter-spacing:.04em;} .kt-card .mean{font-size:14px;color:#46433d;margin-top:3px;} .kt-flip{margin:18px 0 26px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#86827a;} /* ============================================================================ Homepage ============================================================================ */ .home-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);} .home-hero .wrap{max-width:760px;margin:0 auto;padding-top:84px;padding-bottom:72px;} .home-title{ font-family:var(--font-sans);font-weight:700; font-size:clamp(2.2rem,5.2vw,3.4rem);line-height:1.06;letter-spacing:-.015em;margin:0 0 16px; } .home-jp{font-family:var(--font-jp);font-weight:600;color:var(--shu); font-size:clamp(1.2rem,3vw,1.6rem);letter-spacing:.12em;margin:0 0 22px;} .home-lede{font-size:18px;color:var(--sumi-soft);max-width:48ch;margin:0;} .home-ghost{ position:absolute;right:-2%;bottom:-26%;font-family:var(--font-jp);font-weight:800; font-size:40vw;color:var(--sumi);opacity:.025;pointer-events:none;line-height:1;z-index:0; } .home-hero .wrap{position:relative;z-index:1;} .home-apps{padding:64px 0 84px;} .app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;} .app-card{ position:relative;display:flex;flex-direction:column; border:1px solid var(--rule);background:var(--washi-2);border-radius:6px; padding:24px 22px;transition:border-color .2s ease,transform .2s ease; } .app-card:hover{border-color:var(--sumi);transform:translateY(-1px);} .app-card .ck{font-family:var(--font-jp);font-weight:600;font-size:30px;color:var(--shu);line-height:1;margin-bottom:14px;} .app-card .eyebrow{margin-bottom:8px;} .app-card h2{font-family:var(--font-sans);font-weight:700;font-size:18px;margin:0 0 6px;} .app-card h2 a{color:var(--sumi);text-decoration:none;} /* Stretch the title link across the whole card so the entire card is the primary CTA to the app page. Store badges sit above it and stay clickable. */ .app-card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;} .app-card:hover h2 a{color:var(--shu);} .app-card h2 a:focus-visible{outline:2px solid var(--shu);outline-offset:3px;} .app-card .desc{color:var(--sumi-soft);font-size:14.5px;margin:0 0 18px;flex:1;} .app-card .store-row{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;margin-top:auto;align-items:flex-start;} .app-card .store-badge{height:40px;} /* ============================================================================ Footer (shared) — full cross-sell on app pages, simple legal elsewhere ============================================================================ */ .foot{border-top:1px solid var(--rule);background:var(--washi-2);} .foot .wrap{padding:54px 28px 60px;} .foot-h{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:26px;} .cross{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:46px;} .ccard{display:flex;align-items:center;gap:16px;text-decoration:none;border:1px solid var(--rule); background:var(--washi);padding:18px 20px;border-radius:4px;transition:border-color .2s ease,transform .2s ease;} .ccard:hover{border-color:var(--sumi);transform:translateY(-1px);} .ccard:focus-visible{outline:2px solid var(--shu);outline-offset:3px;} .ccard .ck{font-family:var(--font-jp);font-weight:600;font-size:26px;color:var(--sumi);} .ccard .ct{font-weight:700;font-size:15px;} .ccard .cd{font-size:12.5px;color:var(--grey);margin-top:2px;} .legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; font-size:12.5px;color:var(--grey);border-top:1px solid var(--rule);padding-top:24px;} .legal a{color:var(--sumi-soft);text-decoration:none;margin-left:18px;} .legal a:first-child{margin-left:0;} .legal a:hover{color:var(--shu);} .legal a:focus-visible{outline:2px solid var(--shu);outline-offset:2px;} /* simple variant: no cross cards above, so drop the divider + tighten padding */ .foot--simple .wrap{padding:34px 28px;} .foot--simple .legal{border-top:0;padding-top:0;} /* ============================================================================ Prose pages (privacy, brand privacy, Shotokan kata reference) ============================================================================ */ .prose{max-width:760px;margin:0 auto;padding:56px 28px 76px;width:100%;} .prose h1{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-.01em;line-height:1.08;margin:0 0 .5rem;} .prose .updated,.prose .lede{color:var(--grey);font-size:.95rem;margin:0 0 2rem;} .prose h2{font-family:var(--font-sans);font-weight:700;font-size:1.2rem;letter-spacing:.01em; margin:2.4rem 0 .6rem;padding-top:1.3rem;border-top:1px solid var(--rule);} .prose p,.prose ul{margin:.7rem 0;color:var(--sumi-soft);} .prose ul{padding-left:1.25rem;} .prose li{margin:.3rem 0;} .prose strong{font-weight:700;color:var(--sumi);} .prose a{color:var(--shu);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--shu) 40%,transparent);} .prose a:hover{border-bottom-color:var(--shu);} /* ---------- kata table ---------- */ .kata-table{width:100%;border-collapse:collapse;margin:1.25rem 0 .5rem;font-size:.95rem;} .kata-table thead th{ text-align:left;font-weight:700;color:var(--grey);border-bottom:1px solid var(--rule); padding:.5rem .6rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase; } .kata-table tbody td{padding:.55rem .6rem;vertical-align:middle;border-bottom:1px solid var(--rule);} .kata-table tbody tr:nth-child(even) td{background:var(--washi-2);} .kata-table .col-num{width:2.5rem;color:var(--grey);font-variant-numeric:tabular-nums;} .kata-table .col-kanji{font-family:var(--font-jp);font-size:1.45rem;line-height:1.2;width:9rem;color:var(--sumi);} .kata-table .col-romaji{width:11rem;} .kata-table .col-romaji a{white-space:nowrap;} .kata-table .col-romaji a::after{content:"\00A0\2197";color:var(--grey);font-size:.85em;} .kata-table .col-english{color:var(--sumi-soft);} .kata-table .col-kyu{width:5rem;text-align:right;color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap;} .kata-table .col-kyu .dan{font-size:.8rem;color:var(--shu);letter-spacing:.04em;} .kata-table tbody tr:target td{ background:color-mix(in srgb,var(--shu) 14%,transparent); box-shadow:inset 4px 0 0 var(--shu); } .review-notes{color:var(--sumi-soft);font-size:.95rem;} .review-notes ul{padding-left:1.25rem;margin:.4rem 0;} .review-notes li{margin:.35rem 0;} .review-notes .jp{font-family:var(--font-jp);font-size:1.05em;} @media (max-width:640px){ .kata-table thead{display:none;} .kata-table,.kata-table tbody,.kata-table tr,.kata-table td{display:block;width:auto;} .kata-table tbody tr{padding:.65rem 0;border-bottom:1px solid var(--rule);} .kata-table tbody tr:nth-child(even) td{background:transparent;} .kata-table tbody tr:nth-child(even){background:var(--washi-2);padding:.65rem .6rem;} .kata-table tbody td{border-bottom:none;padding:.1rem 0;} .kata-table tbody td::before{ content:attr(data-label);display:inline-block;width:5.5rem;font-size:.78rem; letter-spacing:.04em;text-transform:uppercase;color:var(--grey);vertical-align:middle; } .kata-table .col-kanji{font-size:1.45rem;} .kata-table .col-kyu{text-align:left;} .kata-table .col-num::before,.kata-table .col-kanji::before{display:none;} .kata-table tbody tr:target{ background:color-mix(in srgb,var(--shu) 14%,transparent); box-shadow:inset 4px 0 0 var(--shu); } .kata-table tbody tr:target td{background:transparent;box-shadow:none;} } /* ============================================================================ Motion ============================================================================ */ @media (prefers-reduced-motion: no-preference){ .hero .rail{animation:settle .9s cubic-bezier(.2,.7,.2,1) both;} .hero-body>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;} .hero-body>*:nth-child(1){animation-delay:.05s;} .hero-body>*:nth-child(2){animation-delay:.12s;} .hero-body>*:nth-child(3){animation-delay:.19s;} .hero-body>*:nth-child(4){animation-delay:.26s;} @keyframes settle{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} .seal{transition:transform .3s ease;} .titleline:hover .seal{transform:rotate(2deg) scale(1.04);} } @media (prefers-reduced-motion: reduce){ .app-card,.ccard{transition:none;} .app-card:hover,.ccard:hover{transform:none;} } /* ============================================================================ Responsive ============================================================================ */ @media (max-width:860px){ .hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:48px;padding-bottom:56px;} .rail{writing-mode:horizontal-tb;font-size:clamp(4.5rem,26vw,8rem);letter-spacing:.02em;} .frows{grid-template-columns:1fr;gap:30px;} .showcase .wrap{grid-template-columns:1fr;gap:40px;} .phone{justify-self:center;} .cross{grid-template-columns:1fr;} } @media (max-width:520px){ .topbar .wrap{gap:10px;} .brand .word{display:none;} .nav a{padding:6px 7px;} } /* ============================================================================ Print (kata reference) ============================================================================ */ @media print{ :root{--washi:#fff;--washi-2:#f3f3f3;--sumi:#000;--sumi-soft:#333;--grey:#333;--rule:#aaa;--shu:#000;} .topbar,.foot{display:none;} body{display:block;background:#fff;color:#000;} .prose{padding:0;max-width:none;} .prose h1{margin-top:0;} .prose h2{page-break-before:avoid;} .kata-table{font-size:11pt;page-break-inside:auto;} .kata-table tbody tr{page-break-inside:avoid;} .kata-table thead{display:table-header-group;} .prose a{color:#000;border-bottom:none;} .kata-table .col-romaji a::after{color:#000;} }