/* Smart Scholars Journal Audit — theme: deep navy + saffron */ :root{ --navy:#0e1f3d; --navy-2:#16305c; --navy-3:#1f4380; --saffron:#14b8a6; --saffron-2:#2dd4bf; --saffron-dark:#0A6158; --ink:#0A0908; --ink-2:#4A3529; --muted:#4A3529; --line:#E3BC9A; --bg:#FFDAB9; --card:#FFF3E6; --ok:#1f9d55; --bad:#d64545; --warn:#e69b16;--warn-ink:#8a5a00; --info:#2f6fdd; --enh:#7c3aed; --radius:14px; --shadow:0 10px 30px rgba(14,31,61,.08); --font:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --display:'Syne',system-ui,-apple-system,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px} a{color:var(--navy-3);text-decoration:none} h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0 0 .5em;color:var(--navy)} h1{font-size:clamp(2.1rem,4.5vw,3.4rem)} h2{font-size:clamp(1.6rem,3vw,2.3rem)} h3{font-size:1.25rem} p{margin:0 0 1em} .muted{color:var(--muted)} .small{font-size:.875rem} .container{max-width:1140px;margin:0 auto;padding:0 20px} .section{padding:72px 0} .section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .eyebrow{display:inline-block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-dark);font-weight:700;margin-bottom:10px} .lead{font-size:1.15rem;color:var(--ink-2)} .center{text-align:center} /* header */ .site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50} .nav-wrap{display:flex;align-items:center;justify-content:space-between;height:70px} .brand{display:flex;align-items:center;gap:10px;color:#fff} .brand strong{display:block;font-family:var(--display);font-size:1.1rem;line-height:1} .brand small{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75} .brand-mark{width:40px;height:40px;border-radius:10px;background:var(--saffron);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--display)} .nav{display:flex;gap:26px;align-items:center} .nav a{color:#dbe3f2;font-weight:500;font-size:.95rem} .nav a:hover{color:#fff} .nav-cta-light{color:#fff!important} .pill{background:var(--saffron);color:var(--navy);border-radius:999px;padding:0 7px;font-size:.75rem;font-weight:700} .nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem} @media(max-width:820px){.nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--navy);flex-direction:column;padding:16px 20px;gap:14px}.nav-open .nav{display:flex}.nav-toggle{display:block}} /* buttons */ .btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:12px 22px;font-weight:600;border:1px solid transparent;cursor:pointer;font-size:.95rem;font-family:var(--font);transition:.15s} .btn-accent{background:var(--saffron);color:#02231F;font-weight:700} .btn-accent:hover{background:var(--saffron-2)} .btn-primary{background:var(--navy);color:#fff} .btn-primary:hover{background:var(--navy-2)} .btn-outline{border-color:var(--line);background:#fff;color:var(--navy)} .btn-outline:hover{border-color:var(--navy)} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)} .btn-ghost:hover{border-color:#fff} .btn-danger{background:var(--bad);color:#fff} .btn-ok{background:var(--ok);color:#fff} .btn-sm{padding:8px 14px;font-size:.85rem} .btn-lg{padding:15px 30px;font-size:1.05rem} .btn-block{width:100%;justify-content:center} /* pressed / unavailable states — a button must never look pressable when it is not, and must always show that a press registered (this was reported twice as "button not working") */ .btn[disabled],.btn:disabled{background:#eceff4!important;border-color:#dfe4ec!important;color:#98a2b3!important; cursor:not-allowed;box-shadow:none;filter:none} .btn[disabled]:hover,.btn:disabled:hover{background:#eceff4!important;border-color:#dfe4ec!important;color:#98a2b3!important} .btn.is-working{background:var(--saffron)!important;border-color:var(--saffron)!important;color:#fff!important; cursor:progress;pointer-events:none} .btn.is-working::before{content:'';width:13px;height:13px;flex:none;border:2px solid rgba(255,255,255,.45); border-top-color:#fff;border-radius:50%;animation:gi-spin .7s linear infinite} @keyframes gi-spin{to{transform:rotate(360deg)}} /* full-page acknowledgement so a click is never invisible */ #gi-busy{position:fixed;inset:0;z-index:9999;background:rgba(14,31,61,.55);display:flex;align-items:center; justify-content:center;padding:20px;animation:gi-fade .12s ease-out} #gi-busy .gi-box{background:#fff;border-radius:14px;padding:26px 30px;max-width:430px;text-align:center; box-shadow:0 18px 50px rgba(0,0,0,.32)} #gi-busy .gi-box strong{display:block;font-size:1.05rem;color:var(--navy);margin-bottom:6px} #gi-busy .gi-box span{font-size:.88rem;color:var(--muted)} #gi-busy .gi-dot{width:34px;height:34px;margin:0 auto 14px;border:3px solid var(--line); border-top-color:var(--saffron);border-radius:50%;animation:gi-spin .8s linear infinite} @keyframes gi-fade{from{opacity:0}to{opacity:1}} /* the message you land on after the click must catch the eye */ .flash-pop{animation:gi-pop 1.5s ease-out} @keyframes gi-pop{0%{transform:scale(.985);box-shadow:0 0 0 0 rgba(20,184,166,.55)} 35%{transform:scale(1);box-shadow:0 0 0 9px rgba(20,184,166,0)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(20,184,166,0)}} /* hero */ .hero{background:radial-gradient(1200px 500px at 80% -10%,#274c8f 0%,var(--navy) 55%);color:#fff;padding:90px 0 80px;position:relative;overflow:hidden} .hero h1{color:#fff} .hero .lead{color:#c9d5ea;max-width:560px} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .hero-stats{display:flex;gap:34px;margin-top:40px;flex-wrap:wrap} .hero-stats div strong{display:block;font-size:1.7rem;font-family:var(--display);color:var(--saffron)} .hero-stats div span{font-size:.85rem;color:#b9c6df} .hero-card{background:#fff;color:var(--ink);border-radius:18px;padding:26px;box-shadow:0 30px 60px rgba(0,0,0,.35)} .hero-card h3{margin-bottom:14px} .meter{display:flex;gap:6px;margin:14px 0 6px} .meter span{flex:1;height:10px;border-radius:6px;background:#e9edf5} .meter span.on{background:var(--saffron)} .gap-list{list-style:none;padding:0;margin:14px 0 0} .gap-list li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line);font-size:.9rem} .dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:6px} .dot-ok{background:var(--ok)} .dot-bad{background:var(--bad)} .dot-warn{background:var(--warn)} .dot-enh{background:var(--enh)} @media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding:60px 0}} /* logos strip */ .strip{background:#fff;border-bottom:1px solid var(--line);padding:18px 0} .strip .container{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;color:var(--muted);font-weight:600;letter-spacing:.06em;font-size:.8rem;text-transform:uppercase} /* cards & grids */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px} @media(max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}} @media(max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .card.raised{box-shadow:var(--shadow);border-color:transparent} .step-no{width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--saffron);display:grid;place-items:center;font-weight:700;font-family:var(--display);margin-bottom:14px} .criteria-cat{display:flex;gap:12px;align-items:flex-start} .criteria-cat .ico{width:42px;height:42px;border-radius:10px;background:#fff4e2;color:var(--saffron-dark);display:grid;place-items:center;font-weight:800;flex:none} .criteria-cat small{color:var(--muted)} /* readiness bands */ .bands{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff} .bands div{padding:20px;border-left:4px solid} .bands div+div{border-top:0} .band-notready{border-left-color:var(--bad)} .band-core{border-left-color:var(--warn)} .band-close{border-left-color:var(--info)} .band-ready{border-left-color:var(--ok)} .bands strong{display:block;font-family:var(--display);font-size:1.1rem;margin-bottom:4px} @media(max-width:800px){.bands{grid-template-columns:1fr 1fr}} @media(max-width:500px){.bands{grid-template-columns:1fr}} /* pricing */ .price-card{position:relative} .price-card.featured{border:2px solid var(--saffron)} .price-card .tag{position:absolute;top:-12px;right:18px;background:var(--saffron);color:var(--navy);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase} .price{font-family:var(--display);font-size:2.4rem;color:var(--navy);margin:8px 0} .price small{font-size:1rem;color:var(--muted);font-family:var(--font)} .check-list{list-style:none;padding:0;margin:14px 0 20px} .check-list li{padding:6px 0 6px 26px;position:relative;font-size:.93rem} .check-list li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700} /* faq */ details{border-bottom:1px solid var(--line);padding:14px 0} summary{cursor:pointer;font-weight:600;color:var(--navy);list-style:none;display:flex;justify-content:space-between} summary:after{content:"+";color:var(--saffron-dark);font-size:1.3rem} details[open] summary:after{content:"–"} /* forms */ .form-card{max-width:560px;margin:40px auto} .form-wide{max-width:820px;margin:40px auto} label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 6px;color:var(--navy)} input[type=text],input[type=email],input[type=password],input[type=url],input[type=tel],input[type=number],select,textarea{width:100%;padding:12px 14px;border:1px solid #cfd6e4;border-radius:10px;font:inherit;background:#fff} input:focus,select:focus,textarea:focus{outline:2px solid var(--saffron);border-color:var(--saffron)} .checks{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:6px} .checks label{display:flex;align-items:center;gap:8px;font-weight:500;margin:0} .help{font-size:.82rem;color:var(--muted);margin-top:4px} .alert{padding:12px 16px;border-radius:10px;margin:12px 0;font-size:.93rem} .alert-ok{background:#e7f7ee;color:#14653a} .alert-bad{background:#fdecec;color:#8f1f1f} .alert-warn{background:#fff6e5;color:#7a4b00} .alert-info{background:#e8f0fd;color:#1f4a9c} /* status colour rule (9 Sep 2026): amber = working, green = finished, red = a fault or a stop that needs you, blue = the page-refresh notice */ .refresh-note{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:8px;background:#e8f0fd;color:#1f4a9c} /* app pages */ .page-head{background:var(--navy);color:#fff;padding:38px 0} .page-head h1{color:#fff;font-size:2rem;margin:0} .page-head p{color:#b9c6df;margin:6px 0 0} .app{padding:32px 0 60px} table.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top} .tbl th{background:#f1f4f9;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)} .tbl tr:last-child td{border-bottom:0} .tbl-wrap{overflow-x:auto} .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.75rem;font-weight:700} .badge-ok{background:#e7f7ee;color:#14653a} .badge-enh{background:#f1e9fe;color:#5b21b6} .badge-bad{background:#fdecec;color:#8f1f1f} .badge-warn{background:#fff6e5;color:#7a4b00} .badge-info{background:#e8f0fd;color:#1f4a9c} .badge-ready{background:#e7f7ee;color:#14653a} .badge-close{background:#e8f0fd;color:#1f4a9c} .badge-core{background:#fff6e5;color:#7a4b00} .badge-notready{background:#fdecec;color:#8f1f1f} .badge-pending{background:#eef0f4;color:#4a5568} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px} .stat strong{display:block;font-size:1.8rem;font-family:var(--display);color:var(--navy)} .stat span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em} /* payment */ .pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:700px){.pay-methods{grid-template-columns:1fr}} .pay-methods .card h3{display:flex;align-items:center;gap:8px} .mono{font-family:ui-monospace,Menlo,Consolas,monospace;background:#f1f4f9;padding:10px 12px;border-radius:8px;white-space:pre-wrap;font-size:.88rem} .summary-box{background:#ecfdf5;border:1px solid #99f6e4;border-radius:12px;padding:18px} /* report */ .report-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center} .score-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1.9rem;color:var(--navy);background:conic-gradient(var(--saffron) calc(var(--p)*1%),#e9edf5 0);position:relative} .score-ring:before{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%} .score-ring b{position:relative} .cat-block{margin-top:26px} .cat-block h3{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--navy);padding-bottom:6px} .crit{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0;background:#fff;border-left-width:5px} .crit-pass{border-left-color:var(--ok)} .crit-fail{border-left-color:var(--bad)} .crit-manual{border-left-color:var(--warn)} .crit-improve{border-left-color:var(--enh)} .crit-title{display:flex;justify-content:space-between;gap:10px;font-weight:600} .crit .ev{font-size:.85rem;color:var(--ink-2);margin-top:6px} .crit .ev a{word-break:break-all} .fix{margin-top:10px;background:#ecfdf5;border-left:3px solid var(--saffron);padding:10px 12px;font-size:.88rem;border-radius:0 8px 8px 0} .fix b{color:var(--saffron-dark)} .fix-enh{background:#f6f1ff;border-left-color:var(--enh)} .fix-enh b{color:var(--enh)} .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;margin:10px 0} .progress{height:10px;background:#e9edf5;border-radius:6px;overflow:hidden} .progress i{display:block;height:100%;background:var(--saffron)} .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0} @media print{.site-header,.site-footer,.toolbar,.nav-toggle,[data-copy],#copy-all-drafts{display:none!important}body{background:#fff}.crit{break-inside:avoid}} /* footer */ .site-footer{background:#0a1630;color:#b9c6df;padding:50px 0 24px;margin-top:40px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px} .footer-grid h4{color:#fff;margin:0 0 10px;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em} .footer-grid a{display:block;color:#b9c6df;margin:6px 0;font-size:.92rem} .footer-grid a:hover{color:#fff} .footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:18px;font-size:.8rem} @media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}} /* GetIndexed specifics */ .tier-head{display:flex;align-items:center;gap:10px;margin:26px 0 10px} .idx{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:8px 0} .idx>*{min-width:0}.idx .small{overflow-wrap:anywhere} /* 25 Sep 2026: a web address in a note no longer widens a phone screen */ .idx.caution{border-color:#fecaca;background:#fff7f7} .idx .meta{font-size:.8rem;color:var(--muted);margin-top:4px} .field-row{display:grid;grid-template-columns:220px 1fr auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line)} .field-row .val{white-space:pre-wrap;font-size:.92rem;background:#f7f8fb;border-radius:8px;padding:8px 10px;min-height:38px} .field-row .val.empty{color:var(--bad);font-style:italic} @media(max-width:700px){.field-row{grid-template-columns:1fr}.idx{grid-template-columns:auto minmax(0,1fr)}} .bm{display:inline-block;background:var(--navy);color:#fff!important;padding:10px 16px;border-radius:10px;font-weight:700;cursor:grab} .steps{counter-reset:s;list-style:none;padding:0;margin:0} .steps li{counter-increment:s;padding:8px 0 8px 36px;position:relative;border-top:1px solid var(--line)} .steps li:before{content:counter(s);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--saffron-2);font-weight:700;display:grid;place-items:center;font-size:.8rem} /* ================================================================================================ SMART SCHOLARS — instrument on peach. Finalised 11 Sep 2026. Masthead Sandy Brown · crumpled paper on · Martian Mono throughout · Syne for headings. Four colours, all real English colour names, so they can be said out loud: Peach Puff #FFDAB9 the ground, the crumpled sheet Sandy Brown #F4A460 the masthead Chocolate #D2691E structure: rules, left edges, the live state Saddle Brown #8B4513 small accent text (Chocolate reads 3.3:1 at small sizes, below the readable minimum; Saddle Brown is the same family at 6.5:1) Mono everywhere was the publisher's call, against my advice that monospace is harder to read at paragraph length. So it is tuned for it rather than left at its defaults: tighter tracking, more line height, and a hard measure on prose. That is the difference between honouring a decision and merely obeying it. ============================================================================================== */ body{ background-color:#FFDAB9; font-family:var(--font); letter-spacing:-.012em; line-height:1.68; } /* A comfortable line length belongs to a text COLUMN, not to every paragraph in the app. Capping every

,

  • and .small at 74ch made text inside a card stop two-thirds of the way across and leave a dead strip against the card's own border (publisher feedback, 11 Sep 2026). Text now fills whatever holds it. Add class="measure" to the few places that are genuinely long-form reading and want a narrower line. */ .measure{max-width:74ch} /* ---- the crumpled sheet: a ball of paper opened out. Drawn by the browser, no image files ---- */ body::before{ content:'';position:fixed;inset:-8%;z-index:-2;pointer-events:none;mix-blend-mode:multiply;opacity:.55; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.013' numOctaves='5' seed='9' result='t'/%3E%3CfeDiffuseLighting in='t' lighting-color='%23ffffff' surfaceScale='2.1'%3E%3CfeDistantLight azimuth='235' elevation='55'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)'/%3E%3C/svg%3E"); background-size:920px 920px; } body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply;opacity:.3; background-image: repeating-linear-gradient(24deg,rgba(150,85,45,0) 0 92px,rgba(150,85,45,.16) 92px 93px,rgba(255,255,255,.5) 93px 95px,rgba(150,85,45,0) 95px 210px), repeating-linear-gradient(-63deg,rgba(150,85,45,0) 0 118px,rgba(150,85,45,.13) 118px 119px,rgba(255,255,255,.45) 119px 121px,rgba(150,85,45,0) 121px 260px), repeating-linear-gradient(108deg,rgba(150,85,45,0) 0 147px,rgba(150,85,45,.11) 147px 148px,rgba(255,255,255,.4) 148px 150px,rgba(150,85,45,0) 150px 300px); } /* ---- type ---- */ h1,h2,h3,.brand strong,.price,.score-ring{font-family:var(--display);font-weight:800;letter-spacing:-.028em;color:var(--ink)} .stat strong,.kpi .card strong,.card strong,table td,.tbl td,.price{font-variant-numeric:tabular-nums;letter-spacing:-.045em} /* ---- masthead: one flat band of Sandy Brown, one rule under it ---- */ .ss-doorbar,.doorbar{background:#F4A460;color:#4A3529;border-bottom:1px solid rgba(80,40,15,.16);box-shadow:none} .ss-doorbar a,.doorbar a{color:#4A3529} .ss-doorbar span:first-child,.doorbar a.on{color:#0A0908;font-weight:700} .site-header,.hdr{background:#F4A460;color:#0A0908;border-bottom:2px solid #0A0908; box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -8px 14px -10px rgba(90,45,15,.6),0 14px 26px -16px rgba(125,62,22,.85)} .brand,.brand strong,.brand small{color:#0A0908} .brand-mark{background:#0A0908;color:#F4A460;border-radius:5px} .nav a,.nav-cta-light,.nav-toggle{color:#0A0908} .nav a{padding:8px 12px;border-radius:5px;border:1px solid transparent;transition:.15s} .nav a:hover,.nav a.on{background:#FFF3E6;border-color:#D2691E;color:#0A0908;transform:translateY(-1px); box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(125,62,22,.16),0 0 0 3px rgba(210,105,30,.16),0 6px 12px -4px rgba(125,62,22,.6)} .site-header .pill,.hdr .pill{background:#0A0908;color:#F4A460} @media(max-width:820px){.nav{background:#F4A460}} /* ---- the title block sits on the PAPER, not in a second coloured band ---- */ .page-head{background:transparent;color:var(--ink);border-bottom:1px solid var(--line);padding:30px 0 26px;box-shadow:none} .page-head h1{color:var(--ink)} .page-head p{color:var(--muted)} .page-head a{color:#8B4513;text-decoration:underline} /* ---- panels: EMBOSSED. Four shadows doing four different jobs --------------------------------- A card is a thick sheet lying on the crumpled paper, lit from above-left. To read as a real object rather than a coloured rectangle it needs all four, and most designs only use the last: 1 a bright hard edge along the TOP, inside the light striking the near edge 2 a dark hard edge along the BOTTOM, inside the card's own thickness in shadow 3 a tight contact shadow just under it where it touches the paper 4 a long soft cast shadow how far it stands off the sheet Press one and all four grow at once: the edge lights up, the underside darkens, the contact shadow tightens and the cast shadow lengthens. That is what "picked up" looks like. */ .card{background:var(--card);border:1px solid var(--line);border-radius:6px;position:relative; box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(125,62,22,.16), inset 2px 0 0 rgba(255,255,255,.55), 0 1px 0 rgba(255,255,255,.8), 0 8px 12px -8px rgba(125,62,22,.5), 0 26px 40px -22px rgba(125,62,22,.8); transition:box-shadow .2s,transform .2s,border-color .18s,background .18s} .card::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;border-radius:6px 0 0 6px; background:linear-gradient(180deg,#E8834A,#D2691E 40%,#A0522D);opacity:.75; box-shadow:inset -1px 0 0 rgba(255,255,255,.4)} .card.raised{box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(125,62,22,.18), 0 1px 0 rgba(255,255,255,.8), 0 10px 16px -10px rgba(125,62,22,.55), 0 36px 56px -26px rgba(125,62,22,.85)} /* Small capitals are for a LABEL of a word or two. This rule was setting every explanatory paragraph inside a card in 10px all-capitals with wide letter-spacing - a publisher called the result unreadable, and they were right (11 Sep 2026). The treatment now belongs to things that really are labels: the caption above a figure, and anything marked .label. */ .card .small.muted{color:#8B4513} .card .small.muted.kpi-label,.card .small.muted.label,.kpi .card>.small.muted:first-child{ letter-spacing:.12em;text-transform:uppercase;font-size:.63rem} .kpi .card .kpi-sub{letter-spacing:normal;text-transform:none;font-size:.78rem;line-height:1.5} @media (hover:hover) and (pointer:fine){ .card:has(a,button,input,select,textarea,summary):hover{ border-color:#D2691E;transform:translateY(-4px); box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -3px 0 rgba(125,62,22,.24), 0 0 0 3px rgba(210,105,30,.18), 0 12px 16px -10px rgba(125,62,22,.6), 0 44px 64px -26px rgba(125,62,22,.95)} .card:has(a,button,input,select,textarea,summary):hover::before{opacity:1;width:5px} } /* the fixed readings sit a little lower and heavier -- they are not going anywhere */ .card:not(:has(a,button,input,select,textarea,summary,h2,h3,h4)){ background:linear-gradient(180deg,#FFF8EF,#FFE3C9); box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -3px 0 rgba(125,62,22,.2), 0 1px 0 rgba(255,255,255,.8), 0 6px 10px -6px rgba(125,62,22,.45), 0 20px 32px -20px rgba(125,62,22,.75)} /* ---- controls: struck keys, not flat rectangles ---- */ .btn{border-radius:6px;font-family:var(--font);letter-spacing:-.015em;transition:.15s; box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.28),0 4px 8px -3px rgba(125,62,22,.55),0 10px 18px -10px rgba(125,62,22,.6)} .btn:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 1px 2px rgba(125,62,22,.4)} .btn-primary{background:var(--ink);color:#FFDAB9} .btn-primary:hover{background:#2A1D14;transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(0,0,0,.3),0 6px 11px -3px rgba(125,62,22,.6),0 16px 26px -12px rgba(125,62,22,.7)} .btn-outline{background:var(--card);color:var(--ink);border-color:var(--line); box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(125,62,22,.14),0 3px 7px -3px rgba(125,62,22,.4),0 9px 16px -10px rgba(125,62,22,.5)} .btn-outline:hover{border-color:#D2691E;transform:translateY(-1px); box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(125,62,22,.16),0 0 0 3px rgba(210,105,30,.16),0 6px 11px -3px rgba(125,62,22,.45),0 15px 24px -12px rgba(125,62,22,.6)} .fbar a{background:var(--card);border-color:var(--line);color:var(--ink);border-radius:6px; box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(125,62,22,.13),0 3px 7px -3px rgba(125,62,22,.4)} .fbar a:hover{border-color:#D2691E;box-shadow:inset 0 1px 0 #fff,0 0 0 3px rgba(210,105,30,.15),0 5px 10px -3px rgba(125,62,22,.45)} .fbar a.on{background:var(--ink);color:#FFDAB9;border-color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.3),0 4px 9px -3px rgba(125,62,22,.55)} /* ---- tables ---- */ .tbl,table{background:var(--card);border-color:var(--line);border-radius:6px; box-shadow:inset 0 2px 0 rgba(255,255,255,1),inset 0 -2px 0 rgba(125,62,22,.14),0 1px 0 rgba(255,255,255,.8),0 8px 12px -8px rgba(125,62,22,.45),0 28px 44px -24px rgba(125,62,22,.8)} .tbl-wrap{border-radius:6px} .brand-mark{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.35),0 4px 9px -3px rgba(90,45,15,.7)} .alert{box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(125,62,22,.1),0 6px 12px -8px rgba(125,62,22,.45),0 18px 30px -22px rgba(125,62,22,.7)} .tbl th,table th{background:#F4A460;color:#0A0908;letter-spacing:.13em;text-transform:uppercase;font-size:.63rem} .tbl td,table td{border-top-color:var(--line)} /* ---- alerts keep the colour rule, on paper ---- */ .alert{border-radius:5px;border:1px solid rgba(80,40,15,.16)} .alert-ok{background:#E4F1E4;color:#14532d} .alert-bad{background:#FBE3DE;color:#8a1f18} .alert-warn{background:#FFEBC9;color:#6b4200} .alert-info{background:#E4EAF5;color:#1f4a9c} /* ---- the order of a service page: figures, the run, the buttons, the drawer, then the rest ---- */ .container.app{display:flex;flex-direction:column} .container.app>.grid-4,.container.app>.kpi-row{order:-3} .container.app>.dd-banner,.container.app>.gi-banner{order:-2} .tools-card>summary{color:var(--ink)} /* ---- glass ------------------------------------------------------------------------------------- The panels become frosted sheets rather than solid ones: the crumpled paper shows through, blurred and slightly richer, and a specular streak runs across the top-left the way light crosses glass. The emboss stays underneath it — glass still has thickness and still casts. What changes is that the face is no longer opaque, so the sheet beneath is part of the picture. The one rule that keeps this readable: the face stays ABOVE 80% opaque. Fashionable glass panels go to 40% and the small print dies on them; on these pages the small print is where the honest part of the report lives, so the glass is thick and the text stays at about 17:1. */ .card, .tbl, table, .alert, .tools-card{ background:linear-gradient(152deg,rgba(255,251,246,.94) 0%,rgba(255,240,225,.86) 55%,rgba(255,232,212,.84) 100%); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border-color:rgba(255,255,255,.7); } .card::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(138deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.18) 20%,rgba(255,255,255,0) 46%); } .card > *{position:relative;z-index:1} .card:not(:has(a,button,input,select,textarea,summary,h2,h3,h4)){ background:linear-gradient(152deg,rgba(255,250,242,.93) 0%,rgba(255,231,209,.88) 100%)} @media (hover:hover) and (pointer:fine){ .card:has(a,button,input,select,textarea,summary):hover{ background:linear-gradient(152deg,rgba(255,253,250,.96) 0%,rgba(255,243,230,.9) 55%,rgba(255,234,216,.88) 100%)} } /* the masthead is glass too, so the crumple carries up through it */ .site-header,.hdr{background:linear-gradient(180deg,rgba(247,175,109,.93),rgba(241,160,92,.9)); -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)} .ss-doorbar,.doorbar{background:linear-gradient(180deg,rgba(250,185,124,.92),rgba(244,164,96,.9)); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} /* controls get the same streak, smaller */ .btn-outline,.fbar a{background:linear-gradient(150deg,rgba(255,252,248,.95),rgba(255,239,224,.88)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .btn-primary{background:linear-gradient(165deg,#1d1712,#0A0908 60%)} .tbl th,table th{background:linear-gradient(180deg,rgba(247,175,109,.95),rgba(241,160,92,.92))} /* a machine that cannot blur still gets solid, readable panels rather than see-through ones */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .card,.tbl,table,.alert,.tools-card{background:#FFF3E6} .site-header,.hdr{background:#F4A460} } /* ---- the foot of the page ------------------------------------------------------------------------ 11 Sep 2026, the publisher, circling two blocks of text: "footer colour change to different please / see content not visible." He was right, and it was my error: the redesign turned every brand and every .muted line to near-black for the LIGHT masthead — and the footer was still the old navy #0a1630, so the tagline and the postal address went dark-on-dark and simply vanished. The honest fix is not to repaint that text; it is to stop having one cold navy block at the bottom of nine otherwise-peach sites. The foot is now paper too, a shade deeper than the page so it still reads as an ending: #F6D4B2 → #EEBE92, with the ink at 11:1 and the quiet lines at 7:1. -------------------------------------------------------------------------------------------- */ .site-footer,.ftr{ background:linear-gradient(180deg,#18C6B2 0%,#14B8A6 100%); /* 19 Sep 2026, the publisher: "footer can we cahnge to that teal colour and content is full black". It already was teal; it was NOT full black -- the body sat at #1A1A1A, the links at #141414 and the small print at #242424, which is three different near-blacks on one band. One value now, #000, everywhere inside the foot. On #14B8A6 that is 8.9:1. */ color:#000; border-top:1px solid rgba(4,33,29,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 8px 18px -14px rgba(0,50,44,.45); /* .site-footer and .ftr have carried margin-top:40px since the navy days. Peach on peach it was invisible; on teal it drew a 40px stripe of page background straight through the middle of the foot. Measured, not guessed: ss-map bottom 6296, ftr top 6336, gap 40. The band and the footer are one foot. */ margin-top:0; } .site-footer h4,.ftr h4{color:#000;font-weight:700;letter-spacing:.08em} .site-footer a,.ftr a,.footer-grid a{color:#000;text-decoration:none;border-bottom:1px solid transparent} .site-footer a:hover,.ftr a:hover,.footer-grid a:hover{color:#000;border-bottom-color:currentColor} .site-footer .muted,.ftr .muted,.site-footer p,.ftr p,.site-footer span,.ftr span{color:#000;opacity:1} .site-footer .brand,.site-footer .brand strong,.site-footer .brand small, .ftr .brand,.ftr .brand strong,.ftr .brand small{color:#000} .site-footer .brand small,.ftr .brand small{opacity:1;color:#000} .footer-bottom,.fbot{border-top:1px solid #0C8D7E;color:#000} /* The map band sits just above it, one shade lighter, so the two read as one foot rather than two. Its own rules are printed INTO THE BODY by ss_map_css() in org.php, so a rule written here at the same weight loses on source order. Measured on the real homepage before touching anything: the peach gradient that used to sit on this line was never actually drawn -- the band was taking var(--card) from the inline block instead. So two things are done here on purpose. 1. section.ss-map (0,1,1) outweighs the inline .ss-map (0,1,0), which is what paints the teal. 2. The inline rules READ --line, --ink and --muted. Defining those on .ss-map beats the :root definition whatever the source order, because a custom property resolves from the nearest ancestor that sets it. That is what recolours the rules and the small print inside the band. */ section.ss-map{background:linear-gradient(180deg,#2AD6C0 0%,#1FCCB6 100%);border-top:2px solid #D2691E;color:#000} .ss-map{--line:#0C8D7E;--ink:#000;--muted:#000} .ss-map .ss-map-head strong,.ss-map .ss-map-col h4,.ss-map .ss-map-soc h4,.ss-map-col a{color:#000} .ss-map .ss-map-head span{color:#000;opacity:1} .ss-map .ss-map-col li span,.ss-map .ss-map-note,.ss-map .ss-map-soc-note{color:#000;opacity:1} /* the hover tint was warm orange, which goes muddy on teal; the doorbar's own white is used instead */ .ss-map .ss-map-soc a.ss-soc-b:hover,.ss-map .ss-map-soc a.ss-soc-b:focus-visible{background:rgba(255,255,255,.45)} /* ---- the masthead, on one line ------------------------------------------------------------------- 11 Sep 2026: "header and footer our logo not visible / in header tabs must single line good i think." Both of those were the same fault. Martian Mono is a WIDE face — every character is the same width as an 'm' — so eight nav labels in it overran the bar, wrapped to two lines, and shoved the wordmark until "GetIndexed" and "How it works" were printed on top of each other. The logo was not faint; it was underneath a tab. So: the nav never wraps (each label is nowrap, the row is nowrap), it is set smaller and tighter with less padding, the brand is pinned and never shrinks, and the burger now takes over at 1040px rather than 820 — below that the labels genuinely cannot fit on one line in this face, and a menu is honest where a squeeze is not. -------------------------------------------------------------------------------------------- */ .nav-wrap{gap:20px} .brand{flex:0 0 auto;white-space:nowrap} .brand strong,.brand small{white-space:nowrap} .nav{flex-wrap:nowrap;gap:2px;min-width:0} .nav a{white-space:nowrap;font-size:.88rem;letter-spacing:-.02em;padding:7px 9px} .nav a.nav-cta-light{font-weight:700} @media(min-width:1041px){.nav{display:flex}.nav-toggle{display:none}} @media(max-width:1040px){ .nav{display:none;position:absolute;top:70px;left:0;right:0;background:#F4A460;flex-direction:column; flex-wrap:wrap;padding:14px 20px;gap:8px;align-items:flex-start;z-index:40;border-bottom:2px solid #D2691E} .nav-open .nav{display:flex} .nav a{font-size:.95rem;padding:9px 10px} .nav-toggle{display:block} } /* the mark is a logo, so it is legible first and decorated second: white on near-black is 19:1, and the Sandy Brown keyline keeps it a badge on the sandy masthead and on the peach foot alike */ .brand-mark{background:#0A0908;color:#fff;border:1px solid #F4A460;border-radius:6px; font-size:1.05rem;letter-spacing:.02em;line-height:1;flex:0 0 auto} .site-footer .brand-mark,.ftr .brand-mark{background:#0A0908;color:#fff;border-color:#D2691E} /* ---- the teal strip, and the hero that used to be navy ------------------------------------------- 11 Sep 2026: the publisher picked #14B8A6 off a "Reference Booster" chip — "green sky blue" — and asked for it on the door strip everywhere, and in place of the navy hero on smartscholars.in. The strip takes it exactly: the text there is small and DARK, and dark ink on #14B8A6 is 8:1. The hero cannot. Its text is white, and white on #14B8A6 is 2.49:1 — under even the 3:1 floor for large type, so the headline would be a smear. Rather than refuse the colour or wreck the hero, the hero takes the same hue at a depth white can live on (12.6:1) and #14B8A6 becomes the bright accent ON it — the eyebrow, the buttons, the rules. It reads as one colour used two ways, which is what it is. Say the word and it becomes flat #14B8A6 with black text instead. -------------------------------------------------------------------------------------------- */ .ss-doorbar,.doorbar{background:linear-gradient(180deg,#18C6B2,#14B8A6); border-bottom:1px solid #0C8D7E;box-shadow:inset 0 -1px 0 rgba(255,255,255,.18); -webkit-backdrop-filter:none;backdrop-filter:none} .ss-doorbar a,.doorbar a{color:#052B26} .ss-doorbar a:hover,.doorbar a:hover{color:#02120F} .ss-doorbar span:first-child,.doorbar span:first-child{color:#04211D;font-weight:700} .ss-doorbar .on,.doorbar a.on{background:#FFFFFF;color:#064740;font-weight:700;border-radius:5px;padding:2px 8px} .ss-doorbar-site{color:#052B26;opacity:.9} /* smartscholars.in — the hero and the inner page heads, in the same family */ .hero{background:linear-gradient(165deg,#0A3A34 0%,#0C453D 55%,#0E524A 100%);color:#fff} .hero h1,.hero h2{color:#fff} .hero p.lead,.hero .lead{color:#CFEDE7} .hero .eyebrow,.hero .small{color:#5EE0CE} .hero .btn-accent{background:#14B8A6;color:#02231F!important;border-color:#0C8D7E;font-weight:700} .hero .btn-outline{background:#FFFBF6;color:#0A3A34;border-color:#FFFBF6} .hero .card{background:#FFFBF6;color:var(--ink);border-color:#E3BC9A} .hero .card h3,.hero .card .eyebrow{color:#0A3A34} .hero a:not(.btn){color:#8FEFE0} /* -------------------------------------------------------------------------------------------- HEADER LINKS YOU CAN ACTUALLY READ The masthead used to be navy, so its links were pale (#dbe4f0) and the signed-in name was white !important. On Sandy Brown those are 1.6:1 and 1.9:1 — invisible, which is what was circled. The links go near-black (9.8:1), and the current page becomes a dark pill with Sandy Brown text (9.8:1 the other way round) instead of white-on-white. .hdr .nav nav a is used because site.css's own .nav nav a would otherwise outrank .nav a. -------------------------------------------------------------------------------------------- */ .hdr .nav nav a,.site-header .nav a,.site-header .nav-cta-light{color:#0A0908} .hdr .nav nav a{padding:7px 10px;border-radius:6px;border:1px solid transparent;font-weight:600} .hdr .nav nav a:hover{background:#FFF3E6;border-color:#D2691E;color:#0A0908} .hdr .nav nav a.on,.site-header .nav a.on{background:#0A0908;color:#F4A460;border-bottom:0; border-color:#0A0908;font-weight:700} .nav a.nav-cta-light,.site-header .nav-cta-light{color:#0A0908!important;font-weight:700; text-decoration:underline;text-underline-offset:3px} .hdr .nav nav a.btn-accent,.hdr .nav nav a.btn{color:#02231F!important;border-bottom:0} /* The pale-mint eyebrow was designed for the dark hero; inside the hero's light card it is 2.1:1. Dark teal on the near-white card instead (10.9:1), and the pillar labels with it. */ .hero .card .eyebrow,.hero .card .small{color:#0A3A34} .hero .card li b,.hero .card li strong,.hero .card b,.hero .card strong{color:#0A3A34} .hero .card p,.hero .card li{color:var(--ink2,#4A3529)} /* The doorbar wraps onto a second line rather than growing a scrollbar. */ .doorbar .container,.ss-doorbar-in{overflow:visible;white-space:normal;flex-wrap:wrap; scrollbar-width:none} .doorbar .container::-webkit-scrollbar,.ss-doorbar-in::-webkit-scrollbar{display:none; width:0;height:0} .doorbar a:last-child,.ss-doorbar-site{margin-left:auto} /* The remaining navy block — the console head on members / journals / institutions. */ .hero-dark{background:linear-gradient(165deg,#0A3A34 0%,#0C453D 55%,#0E524A 100%);color:#fff} .hero-dark h1,.hero-dark h2{color:#fff} .hero-dark p{color:#CFEDE7} .hero-dark .eyebrow{color:#5EE0CE} .hero-dark a:not(.btn){color:#8FEFE0} .hero-dark .card{background:#FFFBF6;color:var(--ink);border-color:#E3BC9A} .hero-dark .card strong,.hero-dark .card h3{color:#0A3A34} .hero .card{padding-bottom:26px} .hero .card .small.muted{color:#7A3E10} /* -------------------------------------------------------------------------------------------- OTHER SCRIPTS Martian Mono and Syne have no Devanagari and no Arabic. Without these, a Hindi page falls back to whatever the reader's machine has — different on every device. The Noto faces are loaded in the head only for the language that needs them, so an English page carries none of the weight. -------------------------------------------------------------------------------------------- */ /* Order matters, and it is the opposite of the obvious one. With Noto first, its LATIN glyphs are used for DOI, Crossref, OJS and every product name too — and Noto's Latin is visibly larger than Martian Mono at the same pixel size, so a card whose heading is mostly English came out bigger than the card beside it. Martian Mono first means Latin keeps the site's own face and only the Devanagari falls through to Noto, which is exactly what a mixed-script line should do. */ html[lang="hi"] body,html[lang="hi"] .brand small,html[lang="hi"] .eyebrow,html[lang="hi"] .btn, html[lang="hi"] .nav a,html[lang="hi"] .ss-doorbar{ font-family:'Martian Mono','Noto Sans Devanagari',ui-monospace,system-ui,sans-serif; letter-spacing:0} html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="hi"] h4{ font-family:Syne,'Noto Sans Devanagari',system-ui,sans-serif;line-height:1.32;letter-spacing:0} html[lang="hi"] p,html[lang="hi"] li{line-height:1.85} html[lang="ar"] body{font-family:'Martian Mono','Noto Kufi Arabic',ui-monospace,system-ui,sans-serif;letter-spacing:0} html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{ font-family:Syne,'Noto Kufi Arabic',system-ui,sans-serif;letter-spacing:0} /* Arabic mirrors the page. Only the things that are actually sided need saying. */ html[dir="rtl"] .ss-doorbar-site,html[dir="rtl"] .doorbar a:last-child{margin-left:0;margin-right:auto} html[dir="rtl"] ul,html[dir="rtl"] ol{padding-left:0;padding-right:18px} html[dir="rtl"] .kv,html[dir="rtl"] .hero .wrap{direction:rtl} html[dir="rtl"] .steps div:before{left:auto;right:0} /* -------------------------------------------------------------------------------------------- FORMS The contact form had no styles at all. A