/* ========================================================================== ExactAge — original stylesheet. No web fonts, no frameworks, no external requests. To use a Google font instead of the system stack, add this line to the of your pages and change --font below: ========================================================================== */ :root{ /* ground + surfaces */ --bg:#f2f5f6; --bg-2:#e8eef0; --surface:#ffffff; --surface-2:#eef3f4; --line:#dbe4e7; --line-2:#c2d1d6; /* text */ --text:#0f1a1e; --text-2:#4d5f66; --text-3:#77878d; /* brand */ --brand:#0e6b7d; --brand-2:#0a5464; --brand-wash:#e2f0f3; --accent:#d9542c; --accent-2:#b8421e; --accent-wash:#fdeae2; --good:#0f7a52; --good-wash:#e3f4ec; --shadow-1:0 1px 2px rgba(15,26,30,.06); --shadow-2:0 2px 4px rgba(15,26,30,.05), 0 12px 28px -14px rgba(15,26,30,.22); --shadow-3:0 4px 8px rgba(15,26,30,.06), 0 24px 48px -20px rgba(15,26,30,.30); --r-sm:8px; --r:12px; --r-lg:18px; --maxw:1120px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; } html[data-theme="dark"]{ --bg:#0a1114; --bg-2:#0d171b; --surface:#111c21; --surface-2:#17252b; --line:#22343b; --line-2:#32484f; --text:#e6eef0; --text-2:#a2b3b9; --text-3:#7c8f96; --brand:#43b3c8; --brand-2:#6fcbdb; --brand-wash:#0f2b33; --accent:#ff7f52; --accent-2:#ff9b78; --accent-wash:#33170e; --good:#3fbf85; --good-wash:#0e2b20; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.75); --shadow-3:0 4px 8px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.85); } @media (prefers-color-scheme:dark){ html:not([data-theme="light"]){ --bg:#0a1114; --bg-2:#0d171b; --surface:#111c21; --surface-2:#17252b; --line:#22343b; --line-2:#32484f; --text:#e6eef0; --text-2:#a2b3b9; --text-3:#7c8f96; --brand:#43b3c8; --brand-2:#6fcbdb; --brand-wash:#0f2b33; --accent:#ff7f52; --accent-2:#ff9b78; --accent-wash:#33170e; --good:#3fbf85; --good-wash:#0e2b20; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.75); --shadow-3:0 4px 8px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.85); } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg{max-width:100%;display:block} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;font-weight:750;letter-spacing:-.021em;text-wrap:balance} h1{font-size:clamp(1.8rem,1.25rem + 2.2vw,2.6rem);letter-spacing:-.03em} h2{font-size:clamp(1.32rem,1.15rem + .8vw,1.72rem);margin-top:2em} h3{font-size:1.09rem;margin-top:1.7em;font-weight:700} p{margin:0 0 1.05em} ul,ol{margin:0 0 1.05em;padding-left:1.3em} li{margin-bottom:.42em} strong{font-weight:650;color:var(--text)} code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--line);padding:.1em .38em;border-radius:5px;color:var(--brand-2)} hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0} :focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:5px} ::selection{background:var(--accent-wash);color:var(--text)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} .skip{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip:focus{ position:fixed;left:14px;top:14px;width:auto;height:auto;clip:auto;z-index:99; background:var(--surface);color:var(--text);padding:12px 18px;border:1px solid var(--line); border-radius:var(--r-sm);box-shadow:var(--shadow-3);font-weight:650; } /* ---------------- Header ---------------- */ .site-head{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60} .head-inner{display:flex;align-items:center;gap:14px;min-height:66px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.16rem;color:var(--text);letter-spacing:-.03em;flex:none} .logo:hover{text-decoration:none} .logo-mark{ width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center; background:linear-gradient(145deg,var(--brand),var(--brand-2)); color:#fff;font-size:.82rem;font-weight:800;letter-spacing:-.02em; box-shadow:0 2px 8px -2px rgba(14,107,125,.5); } .nav{margin-left:auto;display:flex;align-items:center;gap:2px} .nav a{color:var(--text-2);font-size:.92rem;font-weight:550;padding:9px 12px;border-radius:var(--r-sm);white-space:nowrap} .nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none} .nav a[aria-current="page"]{color:var(--brand);background:var(--brand-wash);font-weight:650} .theme-btn{ background:var(--surface-2);border:1px solid var(--line);color:var(--text-2); width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:15px; display:grid;place-items:center;margin-left:8px;flex:none; } .theme-btn:hover{color:var(--text);border-color:var(--line-2)} .menu-btn{ display:none;background:var(--surface-2);border:1px solid var(--line);color:var(--text); width:44px;height:40px;border-radius:10px;cursor:pointer;margin-left:auto;font-size:17px;flex:none; } @media (max-width:1060px){ .menu-btn{display:block} .nav{ position:absolute;top:100%;left:0;right:0;background:var(--surface); border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch; padding:10px 18px 16px;gap:2px;margin-left:0;box-shadow:var(--shadow-3); } .nav[hidden]{display:none} .nav a{padding:13px 14px;font-size:1rem} .theme-btn{margin:10px 0 0;width:100%;border-radius:var(--r-sm)} } /* ---------------- Layout ---------------- */ main{padding:22px 0 56px} .crumbs{font-size:.82rem;color:var(--text-3);margin-bottom:16px} .crumbs a{color:var(--text-3)} .crumbs a:hover{color:var(--brand)} .crumbs span{margin:0 7px;opacity:.5} .lede{font-size:1.075rem;color:var(--text-2);max-width:62ch;margin-bottom:1.7em;line-height:1.62} .prose{max-width:70ch} .prose h2{scroll-margin-top:86px} .prose h3{scroll-margin-top:86px} /* trust strip under the h1 on tool pages */ .trust{display:flex;flex-wrap:wrap;gap:8px;margin:-.9em 0 1.7em;padding:0;list-style:none} .trust li{ display:flex;align-items:center;gap:6px;margin:0; font-size:.8rem;font-weight:600;color:var(--text-2); background:var(--surface);border:1px solid var(--line); padding:5px 11px 5px 9px;border-radius:100px; } .trust svg{width:14px;height:14px;flex:none;color:var(--good)} /* ---------------- Calculator card ---------------- */ .calc{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-2);padding:24px;margin-bottom:22px;position:relative; } .calc::before{ content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0; background:linear-gradient(90deg,var(--brand),var(--accent)); } .calc h2{ margin:0 0 18px;font-size:.79rem;text-transform:uppercase;letter-spacing:.1em; color:var(--text-3);font-weight:750; } .field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px} .field{display:flex;flex-direction:column;gap:7px;min-width:0} .field label{font-size:.87rem;font-weight:650;color:var(--text)} .field .hint{font-size:.79rem;color:var(--text-3);line-height:1.5} input[type="date"],input[type="time"],input[type="number"],input[type="text"],input[type="email"],select,textarea{ font-family:inherit;font-size:1rem;font-weight:550;color:var(--text);background:var(--surface-2); border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;width:100%;min-height:48px; transition:border-color .14s,box-shadow .14s,background .14s; } input:hover,select:hover{border-color:var(--line-2)} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--brand);background:var(--surface); box-shadow:0 0 0 4px var(--brand-wash); } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55} input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:.9} html[data-theme="dark"] input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6)} @media (prefers-color-scheme:dark){ html:not([data-theme="light"]) input::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6)} } select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px; background-size:6px 6px,6px 6px;background-repeat:no-repeat; } .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} .btn{ font:inherit;font-weight:680;font-size:.95rem;cursor:pointer;border-radius:10px; display:inline-flex;align-items:center;justify-content:center;text-align:center; padding:12px 22px;min-height:48px;border:1.5px solid transparent; background:var(--brand);color:#fff;letter-spacing:-.01em; transition:filter .14s,transform .06s,box-shadow .14s; box-shadow:0 2px 6px -1px rgba(14,107,125,.35); } .btn:hover{filter:brightness(1.09);text-decoration:none;box-shadow:0 4px 12px -2px rgba(14,107,125,.45)} .btn:active{transform:translateY(1px)} .btn-ghost{background:var(--surface-2);border-color:var(--line);color:var(--text);box-shadow:none} .btn-ghost:hover{background:var(--surface);border-color:var(--line-2);filter:none;box-shadow:var(--shadow-1)} .btn-sm{padding:9px 15px;min-height:40px;font-size:.87rem} .err{ background:var(--accent-wash);border:1px solid var(--accent);color:var(--accent-2); border-radius:10px;padding:12px 15px;margin-top:16px;font-size:.92rem;font-weight:550; } html[data-theme="dark"] .err{color:var(--accent-2)} .err[hidden]{display:none} /* ---------------- Results ---------------- */ .result{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:26px 24px;margin-bottom:22px;box-shadow:var(--shadow-2); background-image:radial-gradient(120% 100% at 0% 0%,var(--brand-wash) 0%,transparent 58%); } .result[hidden]{display:none} @media (prefers-reduced-motion:no-preference){ .result:not([hidden]){animation:rise .32s cubic-bezier(.2,.7,.3,1)} @keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} } .result-label{ font-size:.76rem;text-transform:uppercase;letter-spacing:.11em; color:var(--text-3);font-weight:750;margin-bottom:12px; } .big-age{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin-bottom:9px} .big-age .n{ font-size:clamp(2.6rem,1.6rem + 4.4vw,4.1rem);font-weight:820;line-height:.95; letter-spacing:-.045em;color:var(--accent);font-variant-numeric:tabular-nums; } .big-age .u{font-size:.98rem;font-weight:650;color:var(--text-2);margin-right:6px} .sub-age{color:var(--text-2);font-size:1rem;line-height:1.6} .sub-age strong{color:var(--text);font-variant-numeric:tabular-nums} .unit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:24px} .unit{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:14px 15px;box-shadow:var(--shadow-1); } .unit .v{ font-size:1.28rem;font-weight:780;letter-spacing:-.022em;line-height:1.2; font-variant-numeric:tabular-nums;word-break:break-word; } .unit .k{ font-size:.71rem;color:var(--text-3);text-transform:uppercase; letter-spacing:.075em;font-weight:700;margin-top:3px; } .unit.live .v{color:var(--brand)} .fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px;margin-top:12px} .fact{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:13px 15px;display:flex;gap:11px;align-items:flex-start;box-shadow:var(--shadow-1); } .fact .ico{font-size:1.12rem;line-height:1.35;flex:none} .fact .k{font-size:.7rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;font-weight:700} .fact .v{font-weight:650;font-size:.96rem;line-height:1.4} .countdown{ background:var(--good-wash);border:1px solid var(--line); border-left:4px solid var(--good);border-radius:0 var(--r) var(--r) 0; padding:15px 18px;margin-top:18px; } .countdown .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);font-weight:750} .countdown .v{font-size:1.1rem;font-weight:700;margin-top:4px;letter-spacing:-.015em;line-height:1.45} /* ---------------- Tables ---------------- */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)} table{width:100%;border-collapse:collapse;font-size:.94rem} .table-scroll table{margin:0} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)} th{font-size:.71rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);background:var(--surface-2);font-weight:750;white-space:nowrap} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--surface-2)} td.num{font-variant-numeric:tabular-nums;font-weight:650} /* ---------------- Blocks ---------------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-2)} .note{ background:var(--brand-wash);border:1px solid var(--line);border-left:4px solid var(--brand); border-radius:0 var(--r) var(--r) 0;padding:15px 18px;margin:1.5em 0; } .note p:last-child{margin-bottom:0} .tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:14px;margin:1.3em 0} .tool-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px; display:block;color:var(--text);box-shadow:var(--shadow-1); transition:border-color .16s,transform .16s,box-shadow .16s; } .tool-card:hover{text-decoration:none;border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow-2)} .tool-card .t{font-weight:750;margin-bottom:5px;display:flex;align-items:center;gap:9px;letter-spacing:-.015em} .tool-card .t svg{width:19px;height:19px;flex:none;color:var(--brand)} .tool-card .d{font-size:.885rem;color:var(--text-2);line-height:1.55} .faq{border-top:1px solid var(--line);margin-top:.6em} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;padding:16px 38px 16px 0;font-weight:650;list-style:none;position:relative;letter-spacing:-.012em} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--brand)} .faq summary::after{ content:"";position:absolute;right:9px;top:22px;width:9px;height:9px; border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3); transform:rotate(45deg);transition:transform .2s; } .faq details[open] summary::after{transform:rotate(-135deg);top:26px} .faq details > div{padding:0 0 17px;color:var(--text-2)} .faq details > div p:last-child{margin-bottom:0} .post-list{list-style:none;padding:0;margin:1.5em 0} .post-list li{border-bottom:1px solid var(--line);padding:0;margin:0} .post-list a.pl{display:block;padding:18px 0;color:var(--text)} .post-list a.pl:hover{text-decoration:none} .post-list a.pl:hover .h{color:var(--brand)} .post-list .h{font-weight:750;font-size:1.08rem;letter-spacing:-.018em;line-height:1.35} .post-list .meta{font-size:.8rem;color:var(--text-3);margin-top:4px;font-weight:550} .post-list .ex{color:var(--text-2);font-size:.93rem;margin-top:6px;line-height:1.55} .byline{color:var(--text-3);font-size:.86rem;margin:-.6em 0 1.9em;padding-bottom:1.3em;border-bottom:1px solid var(--line);font-weight:550} .toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px 21px;margin:1.7em 0;box-shadow:var(--shadow-1)} .toc p{font-weight:750;margin:0 0 .55em;font-size:.73rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3)} .toc ol{margin:0;padding-left:1.15em;font-size:.94rem} .toc li{margin-bottom:.3em} /* ---------------- Ad slots ---------------- Hidden until you have AdSense approval. Empty grey "Advertisement" boxes look unfinished to visitors and can count against you during review. After approval, add the class "live" to each slot, or paste your ad unit inside it — either makes it visible. */ .ad-slot{display:none} .ad-slot.live,.ad-slot:not(:empty){ display:flex;align-items:center;justify-content:center;margin:28px 0;min-height:90px; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r); color:var(--text-3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:650; } /* ---------------- Footer ---------------- */ .site-foot{background:var(--surface);border-top:1px solid var(--line);padding:42px 0 28px;margin-top:48px} .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px;margin-bottom:28px} .foot-grid h3{font-size:.73rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);margin:0 0 .85em;font-weight:750} .foot-grid ul{list-style:none;padding:0;margin:0} .foot-grid li{margin-bottom:.5em} .foot-grid a{color:var(--text-2);font-size:.91rem} .foot-grid a:hover{color:var(--brand)} .foot-bot{ border-top:1px solid var(--line);padding-top:20px;font-size:.84rem;color:var(--text-3); display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between; } /* ---------------- Responsive ---------------- */ @media (max-width:760px){ main{padding:18px 0 44px} .calc,.result{padding:20px 17px} .field-grid{gap:15px} .site-foot{padding:32px 0 24px} .foot-grid{gap:22px} } @media (max-width:520px){ .wrap{padding:0 16px} .calc,.result{padding:18px 15px;border-radius:var(--r)} .big-age{gap:0 11px} .big-age .u{font-size:.88rem;margin-right:0} .unit-grid{gap:9px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))} .fact-grid{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))} .unit{padding:12px 13px} .unit .v{font-size:1.14rem} .fact-grid{gap:9px} /* Primary spans the row; the two secondary actions share the next one. */ .btn{flex:1 1 100%} .btn-ghost{flex:1 1 calc(50% - 5px)} .btn-sm,.btn-sm.btn-ghost{flex:0 1 auto} .btn-row{gap:10px} .trust li{font-size:.75rem;padding:4px 10px 4px 8px} th,td{padding:9px 11px} } @media print{ .site-head,.site-foot,.btn-row,.ad-slot,.calc,.crumbs,.trust,.menu-btn{display:none!important} body{background:#fff;color:#000} .result{box-shadow:none;background:#fff;border:1px solid #999;background-image:none} .big-age .n{color:#000} a{color:#000;text-decoration:underline} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} html{scroll-behavior:auto} }