/* CACS OJS Theme — Concept C shared INNER-PAGE system * (PUBLIC-UI-INTEGRATION-02) * * One shared design system for every public inner page (Search, Login, * Register, Lost Password, Issues/Archive, Current Issue, Article, About, * For Authors/Reviewers, Editorial Board, News). Reuses the Concept C tokens * defined in concept-c.css :root (navy/teal/gray, serif/sans, spacing, radius, * shadow) — no second palette. All component rules are scoped under * `.cacs-inner`, the wrapper class each CACS page-template override adds to its * top-level page container, so admin/default OJS pages are never touched. * * Loaded AFTER concept-c.css so equal-specificity rules win the cascade and * out-specify the theme's older base.css/pages.css/components.css frontend * styling on the pages that opt in via `.cacs-inner`. * * Width note (brief step 28): inner pages deliberately live inside the native, * centred `.pkp_structure_content` reading column (~1152px). No full-bleed * width hacks (no 100vw break-outs, no giant negative margins, no transforms) — * every band is edge-to-edge of that column only. */ /* ---------- Top-of-page dead space (Phase 06B density pass) ---------- Same root cause leadership-v1.css already documents and fixes for the homepage (`.pkp_structure_main:has(> .cacs-home)` / `.pkp_structure_ content:has(.cacs-home)`): layout.css's own `.pkp_structure_content { padding-block: clamp(2rem,4vw,3.5rem) }` (~32-56px) stacks with a core `.pkp_structure_main` top margin (~46px), leaving ~100px of pure blank space above the breadcrumb/hero on every `.cacs-inner` page (About/Archives/Article/Auth/etc.) - measured via getBoundingClientRect, not guessed. Unlike the homepage (set to 0, it owns its own full-bleed sections), inner pages still want *some* top breathing room before the breadcrumb, so this trims rather than zeroes it. */ .cacs_theme .pkp_structure_main:has(> .cacs-inner), .cacs_theme .pkp_structure_main:has(> .cacs-article-shell) { margin-block-start: 0; } .cacs_theme .pkp_structure_content:has(.cacs-inner), .cacs_theme .pkp_structure_content:has(.cacs-article-shell) { padding-block-start: var(--sp-3, 1.1rem); row-gap: var(--sp-3, 1.1rem); } /* ---------- Base ---------- */ .cacs-inner{ font-family:var(--cc-sans); color:var(--cacs-navy-900); font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; } .cacs-inner *{box-sizing:border-box} .cacs-inner h1,.cacs-inner h2,.cacs-inner h3,.cacs-inner h4{ font-family:var(--cc-serif);color:var(--cacs-navy-900);margin:0;font-weight:400;text-wrap:balance; } .cacs-inner p{margin:0 0 1rem} .cacs-inner a{color:var(--cacs-teal-700);text-decoration:none} .cacs-inner a:hover{color:var(--cacs-teal-600);text-decoration:underline} .cacs-inner img{max-width:100%} /* ---------- Breadcrumb (shared, brief step 18) ---------- */ .cacs-inner .cmp_breadcrumbs{margin:0 0 var(--sp-4)} .cacs-inner .cmp_breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;margin:0;padding:0} .cacs-inner .cmp_breadcrumbs li{display:flex;align-items:center;font-size:.9rem;color:var(--cacs-gray-600)} .cacs-inner .cmp_breadcrumbs a{color:var(--cacs-teal-700);font-weight:600;text-decoration:none} .cacs-inner .cmp_breadcrumbs a:hover{color:var(--cacs-teal-600);text-decoration:underline} .cacs-inner .cmp_breadcrumbs .separator{color:var(--cacs-gray-500);padding:0 .5rem;font-size:.85rem} .cacs-inner .cmp_breadcrumbs .current span,.cacs-inner .cmp_breadcrumbs li.current{color:var(--cacs-navy-900);font-weight:600} /* ---------- Eyebrow + page hero ---------- */ .cacs-inner .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cacs-teal-700);margin-bottom:.7rem} .cacs-inner .eyebrow::before{content:"";width:6px;height:6px;background:var(--cacs-teal-600);transform:rotate(45deg);flex:none} .cacs-page-hero{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--cacs-navy-950) 0%,var(--cacs-navy-900) 100%);color:#fff;border-radius:var(--radius-m);padding:var(--sp-6) var(--sp-6);margin-bottom:var(--sp-6)} .cacs-page-hero::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:16px 16px;mask-image:linear-gradient(115deg,transparent 0%,transparent 42%,#000 72%,#000 100%);pointer-events:none} .cacs-page-hero>*{position:relative;z-index:1} .cacs-page-hero .eyebrow{color:var(--cacs-cyan-400)} .cacs-page-hero .eyebrow::before{background:var(--cacs-cyan-400)} .cacs-page-hero h1{color:#fff;font-size:2.5rem;line-height:1.15;letter-spacing:-.01em;margin:0 0 .7rem} .cacs-page-hero p{color:#C7D6E2;font-size:1.08rem;line-height:1.65;max-width:60ch;margin:0} /* Light page header variant (for content-dense pages that don't need a band) */ .cacs-page-head{margin-bottom:var(--sp-5)} .cacs-page-head h1{font-size:2.35rem;line-height:1.15;margin:0 0 .6rem} .cacs-page-head p.lead{color:var(--cacs-gray-600);font-size:1.08rem;line-height:1.65;max-width:64ch;margin:0} /* ---------- Shared button system (brief step 2) ---------- Selectors carry the .cacs-inner scope so their specificity (>=0,2,0) beats the theme's older components.css `button:not(.pkp_site_nav_toggle)` (0,1,1) red-action rule that would otherwise paint every button vermilion. */ .cacs-inner .cacs-btn,a.cacs-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:46px;padding:.7rem 1.5rem; font-family:var(--cc-sans);font-size:.95rem;font-weight:600;line-height:1.2; border-radius:var(--radius-s);border:1px solid transparent;cursor:pointer; white-space:nowrap;text-align:center;text-decoration:none; transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease; } .cacs-inner .cacs-btn:hover,a.cacs-btn:hover{text-decoration:none} .cacs-inner .cacs-btn:focus-visible,a.cacs-btn:focus-visible{outline:2px solid var(--cacs-teal-500);outline-offset:2px} /* Both classes chained (0,3,0) so these win even inside a native `.buttons` container where the default theme's `.cmp_form .buttons button` (0,2,1) would otherwise override a single-class primary/secondary rule. */ .cacs-inner .cacs-btn.cacs-btn-primary,a.cacs-btn.cacs-btn-primary{background:var(--cacs-teal-600);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(0,27,56,.08),0 6px 16px rgba(1,146,166,.22)} .cacs-inner .cacs-btn.cacs-btn-primary:hover,a.cacs-btn.cacs-btn-primary:hover{background:var(--cacs-teal-700);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,27,56,.1),0 10px 22px rgba(1,146,166,.3)} .cacs-inner .cacs-btn.cacs-btn-primary:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,27,56,.1)} .cacs-inner .cacs-btn.cacs-btn-secondary,a.cacs-btn.cacs-btn-secondary{background:#fff;border-color:var(--cacs-navy-700);color:var(--cacs-navy-900)} .cacs-inner .cacs-btn.cacs-btn-secondary:hover,a.cacs-btn.cacs-btn-secondary:hover{background:var(--cacs-navy-900);color:#fff;border-color:var(--cacs-navy-900);transform:translateY(-1px)} .cacs-inner .cacs-btn.cacs-btn-secondary:active{transform:translateY(0)} .cacs-inner .cacs-btn-text,a.cacs-btn-text{min-height:auto;padding:.2rem .1rem;background:none;border-color:transparent;color:var(--cacs-teal-700);font-weight:600;font-size:1.02rem;box-shadow:none} .cacs-inner .cacs-btn-text:hover,a.cacs-btn-text:hover{color:var(--cacs-teal-600);background:none;text-decoration:underline} .cacs-inner .cacs-btn-text .arr{transition:transform .15s ease} .cacs-inner .cacs-btn-text:hover .arr{transform:translateX(3px)} .cacs-inner .cacs-btn:disabled,.cacs-inner .cacs-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .cacs-btn-block{width:100%} /* Adopt native OJS frontend submit/reset buttons into the system when they sit inside a CACS inner page (search submit, form submit, etc.). */ .cacs-inner .cmp_form button.submit, .cacs-inner .pkp_form button.submit, .cacs-inner button.submit, .cacs-inner input[type="submit"]{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; min-height:46px;padding:.7rem 1.6rem;font-family:var(--cc-sans);font-size:.95rem;font-weight:600; background:var(--cacs-teal-600);color:#fff;border:1px solid transparent;border-radius:var(--radius-s); cursor:pointer;box-shadow:0 1px 2px rgba(0,27,56,.08),0 6px 16px rgba(1,146,166,.22); transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease; } .cacs-inner button.submit:hover,.cacs-inner input[type="submit"]:hover{background:var(--cacs-teal-700);transform:translateY(-1px)} .cacs-inner button.submit:focus-visible,.cacs-inner input[type="submit"]:focus-visible{outline:2px solid var(--cacs-teal-500);outline-offset:2px} /* ---------- Shared form system (brief steps 1, 17) ---------- */ .cacs-inner label,.cacs-inner .label{font-size:.95rem;font-weight:600;color:var(--cacs-navy-900)} .cacs-inner .description,.cacs-inner .help{font-size:.9rem;color:var(--cacs-gray-600)} .cacs-inner input[type="text"], .cacs-inner input[type="email"], .cacs-inner input[type="password"], .cacs-inner input[type="search"], .cacs-inner input[type="url"], .cacs-inner input[type="number"], .cacs-inner input[type="tel"], .cacs-inner select, .cacs-inner textarea{ width:100%;min-height:48px;padding:.7rem .9rem; font-family:var(--cc-sans);font-size:1rem;color:var(--cacs-navy-900); background:#fff;border:1px solid var(--cacs-gray-300);border-radius:var(--radius-s); transition:border-color .15s ease,box-shadow .15s ease;appearance:none;-webkit-appearance:none; } .cacs-inner textarea{min-height:120px;line-height:1.6;resize:vertical} .cacs-inner select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E747A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .8rem center;padding-right:2.4rem;cursor:pointer; } .cacs-inner input:focus,.cacs-inner select:focus,.cacs-inner textarea:focus{ outline:none;border-color:var(--cacs-teal-600);box-shadow:0 0 0 3px rgba(1,146,166,.18); } .cacs-inner input::placeholder,.cacs-inner textarea::placeholder{color:var(--cacs-gray-500)} .cacs-inner input[type="checkbox"],.cacs-inner input[type="radio"]{ width:18px;height:18px;accent-color:var(--cacs-teal-600);cursor:pointer;flex:none; } .cacs-inner .required{display:inline;color:var(--err-red);font-weight:700;margin-left:.12rem} /* Keep visually-hidden helper spans from adding blank vertical space between a label and its input inside CACS inner forms. */ .cacs-inner .pkp_screen_reader{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .cacs-inner .cacs-field>label,.cacs-inner .fields .label{line-height:1.3} .cacs-inner .pkp_form_error,.cacs-inner .error,.cacs-inner .cacs-form-error{ display:flex;align-items:flex-start;gap:.45rem; color:var(--err-red);font-size:.9rem;font-weight:600; background:rgba(179,38,30,.06);border:1px solid rgba(179,38,30,.25);border-radius:var(--radius-s); padding:.6rem .8rem;margin:.5rem 0; } .cacs-inner .pkp_form_error::before,.cacs-inner .cacs-form-error::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--err-red);color:#fff;font-size:.72rem;font-weight:700;flex:none;margin-top:.05rem} /* ---------- Card ---------- */ .cacs-card{background:#fff;border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:var(--sp-4)} .cacs-card-hover{transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease} .cacs-card-hover:hover{box-shadow:var(--shadow-lift);border-color:var(--cacs-teal-500);transform:translateY(-2px)} /* ---------- Article result card (Search / listings) ---------- */ .cacs-result-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)} .cacs-result-card{background:#fff;border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:var(--sp-4) var(--sp-5);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease} .cacs-result-card:hover{box-shadow:var(--shadow-lift);border-color:var(--cacs-teal-500);transform:translateY(-2px)} .cacs-result-card .rc-type{display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cacs-teal-700);background:rgba(1,146,166,.08);padding:.28rem .55rem;border-radius:var(--radius-s);margin-bottom:.6rem} .cacs-result-card h3,.cacs-result-card .rc-title{font-family:var(--cc-serif);font-size:1.3rem;line-height:1.35;margin:0 0 .5rem} .cacs-result-card h3 a{color:var(--cacs-navy-900)} .cacs-result-card h3 a:hover{color:var(--cacs-teal-700);text-decoration:none} .cacs-result-card .rc-authors{font-size:.95rem;color:var(--cacs-navy-800);margin:0 0 .35rem} .cacs-result-card .rc-meta{font-size:.88rem;color:var(--cacs-gray-600);margin:0 0 .6rem;display:flex;flex-wrap:wrap;gap:.3rem .9rem} .cacs-result-card .rc-abstract{font-size:.95rem;color:var(--cacs-gray-600);line-height:1.6;margin:0 0 .8rem} .cacs-result-card .rc-actions{display:flex;flex-wrap:wrap;gap:.7rem} /* ---------- Issues / Archive ---------- */ .cacs-inner .cacs-iss-list{list-style:none;margin:0;padding:0;display:block;grid-template-columns:none} .cacs-inner .cacs-iss-list>li{display:block;width:100%;max-width:none;float:none;margin:0 0 var(--sp-4)} .cacs-inner .cacs-iss-card{width:100%;box-sizing:border-box;display:grid;grid-template-columns:8.5rem minmax(0,1fr) 12rem;grid-template-areas:none;grid-template-rows:auto;gap:var(--sp-5);align-items:center;background:#fff;border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:var(--sp-4) var(--sp-5);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease} .cacs-iss-card:hover{box-shadow:var(--shadow-lift);border-color:var(--cacs-teal-500);transform:translateY(-2px)} .cacs-iss-card__cover img,.cacs-iss-card__cover-fallback{display:flex;align-items:center;justify-content:center;width:8.5rem;height:11rem;border-radius:var(--radius-s);object-fit:cover;background:linear-gradient(160deg,var(--cacs-navy-900),var(--cacs-navy-950));color:#fff;font-family:var(--cc-serif);font-size:1.4rem;letter-spacing:.08em;box-shadow:var(--shadow-card)} .cacs-iss-card__meta{min-width:0} .cacs-iss-card__title{font-family:var(--cc-serif);font-size:1.4rem;font-weight:400;margin:0 0 .5rem} .cacs-iss-card__title a{color:var(--cacs-navy-900)} .cacs-iss-card__title a:hover{color:var(--cacs-teal-700);text-decoration:none} .cacs-iss-card__facts{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.9rem;color:var(--cacs-teal-700);font-weight:600;margin-bottom:.5rem} .cacs-iss-card__series{font-size:.9rem;color:var(--cacs-gray-600);margin-bottom:.35rem} .cacs-iss-card__desc{font-size:1.05rem;color:var(--cacs-gray-600);line-height:1.6;max-width:60ch} .cacs-iss-card__actions{display:flex;flex-direction:column;gap:.6rem;align-items:stretch} .cacs-archives__strip{margin-top:var(--sp-7);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);padding-top:var(--sp-6);border-top:1px solid var(--cacs-gray-300)} .cacs-archives__strip h2{font-size:1.25rem;margin:0 0 .5rem} .cacs-archives__strip p{font-size:.98rem;color:var(--cacs-gray-600);line-height:1.6;margin:0 0 .8rem} @media (max-width:760px){ /* Must carry the `.cacs-inner` scope: the base rule is `.cacs-inner .cacs-iss-card` (0,2,0), so an unscoped `.cacs-iss-card` (0,1,0) here is out-specified and the 3-column desktop grid stays active — collapsing the title track to ~1ch (one letter per line) at narrow widths. */ .cacs-inner .cacs-iss-card{grid-template-columns:6rem minmax(0,1fr);gap:var(--sp-4)} .cacs-inner .cacs-iss-card__cover img,.cacs-inner .cacs-iss-card__cover-fallback{width:6rem;height:8rem;font-size:1.05rem} .cacs-inner .cacs-iss-card__actions{grid-column:1/-1;flex-direction:row} .cacs-inner .cacs-archives__strip{grid-template-columns:1fr} } /* Very narrow (small phones): stack cover above meta so neither track is squeezed, and let the action button span full width. */ @media (max-width:420px){ .cacs-inner .cacs-iss-card{grid-template-columns:1fr;gap:var(--sp-3)} .cacs-inner .cacs-iss-card__actions{flex-direction:column} .cacs-inner .cacs-iss-card__actions .cacs-btn{width:100%} } /* ---------- Empty state (brief step 20) ---------- */ .cacs-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;padding:var(--sp-7) var(--sp-4);border:1px dashed var(--cacs-gray-300);border-radius:var(--radius-m);background:var(--cacs-gray-100)} .cacs-empty__icon{width:56px;height:56px;color:var(--cacs-teal-600);opacity:.7} .cacs-empty h2,.cacs-empty h3{font-size:1.3rem;margin:0} .cacs-empty p{color:var(--cacs-gray-600);font-size:.98rem;max-width:44ch;margin:0} .cacs-empty .cacs-btn{margin-top:.6rem} /* ---------- Editorial Masthead ---------- */ /* PHASE-08F4B4B: every role section (including the first/"featured" one) now renders through the SAME compact 3-column grid - the previous narrow-single-column "featured" treatment produced a stretched, lopsided look whenever most real members happened to sit in the first configured role (exactly the live data shape here: 8/8 members under "Journal editor"). This is a pure presentation change; no member's role/group assignment is touched. */ .cacs-masthead__role{margin-bottom:var(--sp-5)} .cacs-masthead__role>h2{font-size:1.2rem;margin:0 0 var(--sp-3);padding-bottom:.3rem;border-bottom:2px solid var(--cacs-teal-600);display:inline-block} .cacs-masthead__note{color:var(--cacs-gray-600);font-size:.95rem;margin:-.4rem 0 var(--sp-3)} .cacs-masthead__role-empty{color:var(--cacs-gray-500);font-size:.9rem;font-style:italic;margin:0;padding:.7rem var(--sp-3);border:1px dashed var(--cacs-gray-300);border-radius:var(--radius-m);background:var(--cacs-gray-100)} /* PHASE-08F4B4C: every empty role group collapses into one small premium card inside a compact 3-column grid, instead of a full-width dashed empty-state box per group (the previous per-group row was the main remaining source of unnecessary page length). */ .cacs-masthead__empty-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-bottom:var(--sp-5)} .cacs-masthead__empty-card{background:#fff;border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);padding:.7rem .9rem;border-top:2px solid var(--cacs-teal-600)} .cacs-masthead__empty-card h3{font-size:.875rem;font-weight:700;color:var(--cacs-navy-900);margin:0 0 .2rem} .cacs-masthead__empty-card p{font-size:.8rem;color:var(--cacs-gray-500);font-style:italic;margin:0;line-height:1.4} @media (max-width:820px){.cacs-masthead__empty-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.cacs-masthead__empty-grid{grid-template-columns:1fr}} .cacs-people-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)} .cacs-person{background:#fff;border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;border-top:3px solid var(--cacs-teal-600)} /* Compact circular avatar - premium editorial-board convention, and far less vertical space than the previous full-width 4:5 rectangle when (as here) no photo is on file for anyone yet. */ .cacs-person__portrait{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--cacs-gray-100);margin-bottom:.3rem;flex-shrink:0} .cacs-person__portrait img{width:100%;height:100%;object-fit:cover;display:block} .cacs-person__portrait--placeholder{color:var(--cacs-gray-400)} .cacs-person__portrait--placeholder svg{width:32px;height:32px} .cacs-person__role{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--cacs-teal-700,#016E80)} .cacs-person__name{font-family:var(--cc-serif);font-size:1.1rem;line-height:1.3;color:var(--cacs-navy-900);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.3rem} .cacs-person__affiliation{font-size:.9rem;color:var(--cacs-gray-600);line-height:1.45} .cacs-person__country{font-size:.85rem;color:var(--cacs-gray-500)} .cacs-person__bio{font-size:.88rem;color:var(--cacs-navy-800);line-height:1.5;margin:.2rem 0 0} .cacs-person__interests{font-size:.82rem;color:var(--cacs-teal-700);line-height:1.4;margin:0} .cacs-person__email{display:block;font-size:.85rem;color:var(--cacs-teal-700,#016E80);text-decoration:none;margin-top:.1rem} .cacs-person__email:hover{text-decoration:underline} .cacs-person .orcid a{display:inline-flex} .cacs-masthead__history{margin-top:var(--sp-3);font-size:.95rem;color:var(--cacs-gray-600)} @media (max-width:820px){.cacs-people-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.cacs-people-grid{grid-template-columns:1fr}} /* APC premium tariff summary (For Authors) */ .cacs-apc-summary{background:linear-gradient(155deg,var(--cacs-navy-950) 0%,var(--cacs-navy-900) 100%);color:#fff;border-radius:var(--radius-m);padding:var(--sp-6);margin:0 0 var(--sp-6)} .cacs-apc-summary__head{margin-bottom:var(--sp-4)} .cacs-apc-summary__head .eyebrow{color:var(--cacs-cyan-400)} .cacs-apc-summary__head h2{font-family:var(--cc-serif);font-weight:400;font-size:1.9rem;color:#fff;margin:.3rem 0 0} .cacs-apc-summary__tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin-bottom:var(--sp-4)} .cacs-apc-tier{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-s);padding:var(--sp-4);display:flex;flex-direction:column;gap:.5rem} .cacs-apc-tier__label{font-size:.98rem;color:#C7D6E2} .cacs-apc-tier__price{font-family:var(--cc-serif);font-size:2.1rem;color:var(--cacs-cyan-400);line-height:1} .cacs-apc-tier__currency{font-family:var(--cc-sans);font-size:.85rem;color:#C7D6E2;font-weight:600} .cacs-apc-summary__note{font-size:.95rem;color:#C7D6E2;line-height:1.6;margin:0 0 .8rem;max-width:70ch} .cacs-apc-summary .cacs-btn-text{color:var(--cacs-cyan-400)} .cacs-apc-summary .cacs-btn-text:hover{color:#fff} @media (max-width:820px){.cacs-apc-summary__tiers{grid-template-columns:1fr}} /* ---------- About page ---------- */ /* content.css caps .page_about at --cacs-measure (72ch, a reading width) which squeezes the whole page into a narrow left column (brief §13 complaint). Widen the About page shell to ~1240px; the prose block keeps its own measure. */ .cacs-inner.cacs-about{max-width:1240px;margin-inline:auto} /* content.css applies max-width:var(--cacs-measure) (72ch) to `.page_about` descendants; at ~320px 72ch is wider than the viewport column, so the bands overflow and get clipped. Cap every direct band at 100% of the column. */ .cacs-inner.cacs-about>*{max-width:100%;min-width:0} .cacs-inner.cacs-about .cacs-prose{max-width:72ch} .cacs-about__image{margin:var(--sp-5) 0} .cacs-about__image img{width:100%;max-width:100%;height:auto;border-radius:12px;display:block} .cacs-about__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin:var(--sp-6) 0} .cacs-about__icon{width:48px;height:48px;border-radius:12px;background:rgba(1,146,166,.09);color:var(--cacs-teal-600);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-3)} .cacs-about__icon svg{width:26px;height:26px} .cacs-about__grid h2{font-size:1.3rem;margin:0 0 .5rem} .cacs-about__grid p{font-size:1.02rem;color:var(--cacs-navy-700);line-height:1.7;margin:0} /* PHASE-08F2-R15: reusable icon-chip tint utility, shared by the feature-card grid above and the Scope tiles below - one fixed 6-accent palette, all inside the existing navy/teal/cyan family. */ .cacs-accent-a0{background:#E4F7F8;color:#0192A6} .cacs-accent-a1{background:#E8F7FC;color:#16A6C9} .cacs-accent-a2{background:#EAF1FB;color:#2F6FB3} .cacs-accent-a3{background:#EEF0FB;color:#5667B0} .cacs-accent-a4{background:#EAF8F2;color:#37A47A} .cacs-accent-a5{background:#F2EDFA;color:#8065B2} /* Feature cards: subtle tinted background + colored top edge + matching border, so every card reads as "colored" rather than plain white, without a loud gradient or off-brand hue. */ .cacs-about__grid .cacs-card{position:relative;overflow:hidden;border-top-width:4px;border-top-style:solid} .cacs-about__grid .cacs-card--a0{background:#E4F7F8;border-color:#BEEAEC;border-top-color:#0192A6} .cacs-about__grid .cacs-card--a1{background:#E8F7FC;border-color:#C2E8F2;border-top-color:#16A6C9} .cacs-about__grid .cacs-card--a2{background:#EAF1FB;border-color:#C9DBF3;border-top-color:#2F6FB3} .cacs-about__grid .cacs-card--a3{background:#EEF0FB;border-color:#D2D6F0;border-top-color:#5667B0} .cacs-about__grid .cacs-card--a4{background:#EAF8F2;border-color:#C6EBDA;border-top-color:#37A47A} .cacs-about__grid .cacs-card--a5{background:#F2EDFA;border-color:#E0D3EF;border-top-color:#8065B2} .cacs-about__grid .cacs-card--a0:hover{border-color:#0192A6} .cacs-about__grid .cacs-card--a1:hover{border-color:#16A6C9} .cacs-about__grid .cacs-card--a2:hover{border-color:#2F6FB3} .cacs-about__grid .cacs-card--a3:hover{border-color:#5667B0} .cacs-about__grid .cacs-card--a4:hover{border-color:#37A47A} .cacs-about__grid .cacs-card--a5:hover{border-color:#8065B2} .cacs-about__links{margin:var(--sp-6) 0} .cacs-about__links>h2{font-size:1.6rem;margin:0 0 var(--sp-4)} .cacs-about__linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)} .cacs-about__linkgrid a{display:flex;flex-direction:column;gap:.25rem;padding:var(--sp-4);border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);background:#fff;text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease} .cacs-about__linkgrid a:hover{border-color:var(--cacs-teal-500);box-shadow:var(--shadow-card);transform:translateY(-2px);text-decoration:none} .cacs-about__linkgrid strong{color:var(--cacs-navy-900);font-family:var(--cc-serif);font-size:1.1rem;font-weight:400} .cacs-about__linkgrid span{color:var(--cacs-gray-600);font-size:.9rem} .cacs-about__cta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);flex-wrap:wrap;margin:var(--sp-6) 0 0;padding:var(--sp-5) var(--sp-6);border-radius:var(--radius-m);background:linear-gradient(155deg,var(--cacs-navy-900),var(--cacs-navy-950));color:#fff} .cacs-about__cta h2{color:#fff;font-size:1.5rem;margin:0 0 .3rem} .cacs-about__cta p{color:#C7D6E2;margin:0} @media (max-width:760px){ .cacs-about__grid{grid-template-columns:1fr} .cacs-about__linkgrid{grid-template-columns:1fr} } /* PHASE-08F2-R12 / PREMIUM-REDESIGN: source-locked identity cards (Published by / Founder) and full Aims/Scope sections, built from homepage.docx. Accent colors stay inside the existing navy/teal/cyan family (tokens.css) - no new hues, no gradients beyond what .cacs-page-hero already uses, no glassmorphism. */ /* ---------- Hero: two-column split with a real medical/oncology photo ---------- */ .cacs-about-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:var(--sp-6)} .cacs-about-hero__text{display:flex;flex-direction:column;justify-content:center} .cacs-about-hero__text>*{position:relative;z-index:1} .cacs-about-hero__visual{position:relative;border-radius:var(--radius-m);overflow:hidden;min-height:380px;box-shadow:0 20px 50px rgba(0,15,32,.35)} .cacs-about-hero__visual-image{position:absolute;inset:0;background-image:url("../images/hero-oncology-microscopy-v1.png");background-size:cover;background-position:68% 42%;background-repeat:no-repeat} .cacs-about-hero__visual-fade{position:absolute;inset:0;pointer-events:none;background: linear-gradient(100deg,var(--cacs-navy-950) 0%,rgba(0,27,56,.78) 20%,rgba(0,27,56,.22) 52%,rgba(0,27,56,0) 82%), linear-gradient(0deg,rgba(0,27,56,.35) 0%,rgba(0,27,56,0) 30%)} .cacs-about-hero__visual-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 78% 30%,rgba(107,201,218,.4),transparent 55%);animation:cacs-hero-glow 6s ease-in-out infinite alternate} @keyframes cacs-hero-glow{0%{opacity:.55}100%{opacity:1}} @media (max-width:900px){ .cacs-about-hero{grid-template-columns:1fr;text-align:left} .cacs-about-hero__visual{min-height:210px;margin-top:var(--sp-3)} .cacs-about-hero__visual-image{background-position:62% 40%} } @media (prefers-reduced-motion:reduce){ .cacs-about-hero__visual-glow{animation:none} } /* ---------- Identity cards ---------- */ .cacs-about__identity{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin:0 0 var(--sp-6)} .cacs-identity-block{position:relative;display:flex;gap:var(--sp-3);align-items:flex-start;border:1px solid;border-radius:var(--radius-m);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease} .cacs-identity-block:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)} .cacs-identity-block--publisher{background:#E4F7F8;border-color:#BEEAEC} .cacs-identity-block--publisher:hover{border-color:#0192A6} .cacs-identity-block--founder{background:#EEF0FB;border-color:#D2D6F0} .cacs-identity-block--founder:hover{border-color:#5667B0} .cacs-identity-block__icon{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff} .cacs-identity-block--publisher .cacs-identity-block__icon{color:#0192A6} .cacs-identity-block--founder .cacs-identity-block__icon{color:#5667B0} .cacs-identity-block__icon svg{width:24px;height:24px} .cacs-identity-block__body{position:relative;z-index:1;min-width:0} .cacs-identity-block__label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0192A6;margin-bottom:.35rem} .cacs-identity-block--founder .cacs-identity-block__label{color:#5667B0} .cacs-identity-block__value{display:block;font-size:1.08rem;color:var(--cacs-navy-900);font-weight:600;line-height:1.4} /* ---------- Section framing (Aims) ---------- */ .cacs-about__section{margin:0 0 var(--sp-6)} .cacs-about__section h2{font-size:1.8rem;margin:0 0 var(--sp-3)} .cacs-about__section--aims{position:relative;padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);background:linear-gradient(180deg,#E4F7F8,#fff 65%);border:1px solid #BEEAEC;border-radius:var(--radius-m)} .cacs-about__section--aims::before{content:"";position:absolute;left:0;top:var(--sp-4);bottom:var(--sp-4);width:5px;border-radius:2px;background:linear-gradient(180deg,#0192A6,#16A6C9)} .cacs-about__section--aims h2{margin:0 0 var(--sp-3)} /* ---------- Scope: premium tile grid ---------- */ .cacs-scope-intro{font-size:1.08rem;line-height:1.7;color:var(--cacs-navy-800);max-width:72ch;margin:0 0 var(--sp-4)} .cacs-scope-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin:0;padding:0;list-style:none} .cacs-scope-item{position:relative;display:flex;align-items:flex-start;gap:.65rem;border:1px solid;border-left-width:4px;border-left-style:solid;border-radius:var(--radius-m);padding:.9rem 1rem;font-size:.96rem;line-height:1.4;color:var(--cacs-navy-800);box-shadow:var(--shadow-card);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease} .cacs-scope-item:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)} .cacs-scope-item__icon{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-top:.05rem;background:#fff} .cacs-scope-item__icon svg{width:16px;height:16px} .cacs-scope-item__text{padding-top:.2rem} .cacs-scope-item--a0{background:#E4F7F8;border-color:#BEEAEC;border-left-color:#0192A6} .cacs-scope-item--a0 .cacs-scope-item__icon{color:#0192A6} .cacs-scope-item--a0:hover{border-color:#0192A6} .cacs-scope-item--a1{background:#E8F7FC;border-color:#C2E8F2;border-left-color:#16A6C9} .cacs-scope-item--a1 .cacs-scope-item__icon{color:#16A6C9} .cacs-scope-item--a1:hover{border-color:#16A6C9} .cacs-scope-item--a2{background:#EAF1FB;border-color:#C9DBF3;border-left-color:#2F6FB3} .cacs-scope-item--a2 .cacs-scope-item__icon{color:#2F6FB3} .cacs-scope-item--a2:hover{border-color:#2F6FB3} .cacs-scope-item--a3{background:#EEF0FB;border-color:#D2D6F0;border-left-color:#5667B0} .cacs-scope-item--a3 .cacs-scope-item__icon{color:#5667B0} .cacs-scope-item--a3:hover{border-color:#5667B0} .cacs-scope-item--a4{background:#EAF8F2;border-color:#C6EBDA;border-left-color:#37A47A} .cacs-scope-item--a4 .cacs-scope-item__icon{color:#37A47A} .cacs-scope-item--a4:hover{border-color:#37A47A} .cacs-scope-item--a5{background:#F2EDFA;border-color:#E0D3EF;border-left-color:#8065B2} .cacs-scope-item--a5 .cacs-scope-item__icon{color:#8065B2} .cacs-scope-item--a5:hover{border-color:#8065B2} @media (max-width:900px){ .cacs-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .cacs-about__identity{grid-template-columns:1fr} .cacs-scope-grid{grid-template-columns:1fr} .cacs-about__section--aims{padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5)} } /* ---------- Pagination (brief step 19) ---------- */ .cacs-inner .cmp_pagination,.cacs-inner .pkp_pagination{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:var(--sp-5) 0 0;font-size:.95rem;color:var(--cacs-gray-600)} .cacs-inner .cmp_pagination a,.cacs-inner .cmp_pagination .current,.cacs-inner .cmp_pagination .disabled{ display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .7rem; border:1px solid var(--cacs-gray-300);border-radius:var(--radius-s);color:var(--cacs-navy-800);font-weight:600;background:#fff; } .cacs-inner .cmp_pagination a:hover{border-color:var(--cacs-teal-600);color:var(--cacs-teal-700);text-decoration:none} .cacs-inner .cmp_pagination a:focus-visible{outline:2px solid var(--cacs-teal-500);outline-offset:2px} .cacs-inner .cmp_pagination .current{background:var(--cacs-navy-900);border-color:var(--cacs-navy-900);color:#fff} .cacs-inner .cmp_pagination .disabled{opacity:.45} /* ---------- Native notification (search no-results etc.) ---------- */ .cacs-inner .cmp_notification,.cacs-inner .notification{border-radius:var(--radius-m);padding:var(--sp-4);font-size:.98rem} /* ---------- Content prose (About / policy pages) ---------- */ .cacs-prose{max-width:70ch;font-size:1.1rem;line-height:1.8;color:var(--cacs-navy-800)} .cacs-prose h2{font-size:1.9rem;margin:var(--sp-5) 0 .8rem} .cacs-prose h3{font-size:1.45rem;margin:var(--sp-4) 0 .6rem} .cacs-prose p{margin:0 0 1.1rem} .cacs-prose ul,.cacs-prose ol{margin:0 0 1.1rem;padding-left:1.4rem} .cacs-prose li{margin-bottom:.5rem} .cacs-prose a{color:var(--cacs-teal-700);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.15em;overflow-wrap:anywhere;word-break:break-word} .cacs-prose a:visited{color:var(--cacs-navy-700,#174D6D)} .cacs-prose a:hover{color:var(--cacs-navy-900)} .cacs-prose a:focus-visible{outline:3px solid var(--cacs-teal-300,#6BC9DA);outline-offset:3px;border-radius:2px} /* Phase 08B: APC fee table inside Author Guidelines prose. Plain, restrained academic table (no OJS-default borders, no pricing-card/ marketing treatment) - reuses existing concept-c.css tokens only. */ .cacs-prose table.cacs-fee-table{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.98rem} .cacs-prose table.cacs-fee-table th,.cacs-prose table.cacs-fee-table td{padding:.7rem 1rem;text-align:left;border-bottom:1px solid var(--cacs-gray-300)} .cacs-prose table.cacs-fee-table th{font-family:var(--cc-sans);font-weight:700;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cacs-teal-700);border-bottom:2px solid var(--cacs-teal-600)} .cacs-prose table.cacs-fee-table td:last-child,.cacs-prose table.cacs-fee-table th:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--cacs-navy-900)} .cacs-prose table.cacs-fee-table tbody tr:last-child td{border-bottom:none} @media (max-width:480px){ .cacs-prose table.cacs-fee-table,.cacs-prose table.cacs-fee-table thead,.cacs-prose table.cacs-fee-table tbody,.cacs-prose table.cacs-fee-table tr{display:block} .cacs-prose table.cacs-fee-table thead{display:none} .cacs-prose table.cacs-fee-table tr{border-bottom:1px solid var(--cacs-gray-300);padding:.5rem 0} .cacs-prose table.cacs-fee-table td{display:flex;justify-content:space-between;border-bottom:none;padding:.25rem 0} .cacs-prose table.cacs-fee-table td:first-child{font-weight:600;color:var(--cacs-navy-900)} .cacs-prose table.cacs-fee-table td:last-child{text-align:right} } /* =========================================================================== Auth pages (Login / Register / Lost Password) — PHASE 07C "Auth Compact Premium". Faithful implementation of the approved 07B prototype (docs/evidence/cacs-phase-07b-auth-compact-prototype/). Compact auth-only chrome (cacsAuthHeader/Topbar/Footer.tpl), typographic navy brand panel (no white logo plate), and a tight card spacing budget so a normal login fits 1586x992 with no meaningful vertical scroll. Dark is the default/primary appearance; light is a full Concept C variant. Everything scoped under .cacs-auth (+ the auth-only chrome classes) so nothing leaks elsewhere. All colours reuse the established navy/teal/cyan Concept C tokens. =========================================================================== */ /* ---- theme surface variables (dark default, light override) ---- */ .cacs-auth{ --a-page:#00122A; --a-card:#0A2140; --a-card-2:#0C2947; --a-field:#0C2745; --a-text:#EAF2F8; --a-muted:#9FB6CC; --a-line:rgba(127,224,236,.16); --a-field-line:rgba(148,178,204,.30); --a-accent:#2FADC0; --a-accent-2:#7FE0EC; --a-card-shadow:0 30px 70px -30px rgba(0,6,18,.85); } .cacs-auth[data-cacs-theme="light"]{ --a-page:#EDF3F8; --a-card:#FFFFFF; --a-card-2:#FFFFFF; --a-field:#FFFFFF; --a-text:#002D5E; --a-muted:#5A6B7A; --a-line:#DCE4EC; --a-field-line:#C7D3DE; --a-accent:var(--cacs-teal-700); --a-accent-2:var(--cacs-teal-600); --a-card-shadow:0 24px 60px -28px rgba(0,32,72,.35); } /* Full-bleed layout: the auth chrome owns the viewport. Override the pages.css .page_login/.page_register narrow caps and the .cacs-inner base. */ .cacs-auth-page{box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column;margin:0;padding:0;background:var(--cacs-navy-950,#00122A)} .cacs-auth-page[dir] *{box-sizing:border-box} .cacs-auth-main{flex:1 1 auto;display:flex;min-width:0;margin:0;padding:0} .cacs-inner.cacs-auth{display:flex;flex-direction:column;flex:1 1 auto;width:100%;max-width:none;margin:0;padding:0;min-width:0;gap:0} /* ---- compact auth top bar (~70px) — light letterhead in BOTH appearances ---- */ .cacs-auth-topbar{ position:relative;z-index:5;flex:none;min-height:70px; display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.6rem clamp(18px,3vw,44px); background:#FFFFFF;border-bottom:1px solid #E3E9EF; box-shadow:0 1px 0 rgba(0,45,94,.04),0 6px 20px -14px rgba(0,32,72,.22); } .cacs-auth-topbar__brand{display:inline-flex;align-items:center;text-decoration:none} .cacs-auth-topbar__brand img{display:block;height:40px;width:auto;max-width:200px} .cacs-auth-topbar__right{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px)} .cacs-auth-topbar .cacs-auth-topbar__back{display:inline-flex;align-items:center;gap:.4rem;font-size:13px;font-weight:700; color:#1B3A5B;white-space:nowrap;text-decoration:none;line-height:1; border:1px solid #E1E7ED;background:#F6F8FA;border-radius:999px;padding:.5rem .95rem; transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease} .cacs-auth-topbar__back svg{width:14px;height:14px;flex:none} .cacs-auth-topbar .cacs-auth-topbar__back:hover{background:var(--cacs-teal-700);border-color:var(--cacs-teal-700);color:#FFFFFF;text-decoration:none !important;box-shadow:0 6px 16px -8px rgba(1,146,166,.55)} .cacs-auth-topbar .cacs-auth-topbar__back:focus-visible{outline:2px solid var(--cacs-teal-500);outline-offset:2px} /* Controls live on the white bar in both themes → always dark-on-light. */ .cacs-auth-topbar .cacs-auth-lang{display:inline-flex;align-items:center;gap:2px;background:#EEF2F6;border:1px solid #E1E7ED;border-radius:999px;padding:3px;font-size:13px;font-weight:700;letter-spacing:.02em} .cacs-auth-topbar .cacs-auth-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:auto;min-height:auto;padding:5px 11px;border-radius:999px;color:#5A6B7A;opacity:1;text-decoration:none;line-height:1} .cacs-auth-topbar .cacs-auth-lang a:hover{color:var(--cacs-teal-700)} .cacs-auth-topbar .cacs-auth-lang a.active{background:#fff;color:var(--cacs-teal-700);box-shadow:0 1px 3px rgba(0,32,72,.14)} .cacs-auth-topbar .cacs-appearance-toggle{border:1px solid #E1E7ED;background:#F6F8FA;color:#374a5c} .cacs-auth-topbar .cacs-appearance-toggle:hover{background:var(--cacs-teal-700);border-color:var(--cacs-teal-700);color:#FFFFFF} .cacs-auth-topbar .cacs-appearance-toggle:hover svg{color:#FFFFFF} /* ---- stage: centre the shell in the remaining viewport ---- */ .cacs-auth-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:24px clamp(16px,3vw,44px);min-width:0;background:var(--a-page)} /* ---- shell: two columns, restrained radius ---- */ .cacs-auth__shell{ width:100%;max-width:1200px;display:grid;grid-template-columns:53% 47%; align-items:stretch;gap:0;border-radius:18px;overflow:hidden; background:var(--a-card);box-shadow:var(--a-card-shadow),0 0 0 1px var(--a-line); } .cacs-auth--wide .cacs-auth__shell{max-width:1240px;grid-template-columns:40% 60%} .cacs-auth__aside,.cacs-auth__aside-inner,.cacs-auth-card{min-width:0} /* ---- brand panel: navy in BOTH themes, typographic identity ---- */ .cacs-auth__aside{ position:relative;overflow:hidden;color:#fff;min-height:100%; display:flex;flex-direction:column;justify-content:center; padding:clamp(38px,3.4vw,52px); background:radial-gradient(120% 130% at 12% 8%,#0B3E6E 0%,#002D5E 42%,#001B38 100%); } .cacs-auth__aside::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;z-index:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='560' viewBox='0 0 420 560'%3E%3Cg fill='none' stroke='%230192A6' stroke-width='1.1' stroke-opacity='.34'%3E%3Cpath d='M70 70 L175 118 L150 232 L44 208 Z M175 118 L296 84 L330 196 L150 232 M296 84 L392 150 L330 196 M150 232 L214 330 L120 372 L44 208 M214 330 L330 196 L360 300 L214 330 M214 330 L268 430 L168 470 L120 372 M268 430 L360 300 L392 404 L268 430'/%3E%3C/g%3E%3Cg fill='%2325C0D8' fill-opacity='.55'%3E%3Ccircle cx='70' cy='70' r='4.5'/%3E%3Ccircle cx='175' cy='118' r='4.5'/%3E%3Ccircle cx='296' cy='84' r='4.5'/%3E%3Ccircle cx='392' cy='150' r='4.5'/%3E%3Ccircle cx='44' cy='208' r='4.5'/%3E%3Ccircle cx='150' cy='232' r='5.5'/%3E%3Ccircle cx='330' cy='196' r='4.5'/%3E%3Ccircle cx='120' cy='372' r='4.5'/%3E%3Ccircle cx='214' cy='330' r='5.5'/%3E%3Ccircle cx='360' cy='300' r='4.5'/%3E%3Ccircle cx='392' cy='404' r='4.5'/%3E%3Ccircle cx='268' cy='430' r='4.5'/%3E%3Ccircle cx='168' cy='470' r='4.5'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right -30px top -20px;background-size:auto 118%; } .cacs-auth__aside::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(60% 45% at 78% 18%, rgba(127,224,236,.18) 0%, rgba(127,224,236,0) 70%); opacity:.5;animation:cacsAuthGlow 9s ease-in-out infinite} .cacs-auth__aside-inner{position:relative;z-index:1;max-width:440px} .cacs-auth__wordmark{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:.4rem .55rem;font-family:var(--cc-serif);margin-bottom:1.1rem} .cacs-auth__wordmark b{font-weight:400;font-size:2.9rem;line-height:1;color:#fff;letter-spacing:.04em;white-space:nowrap} .cacs-auth__est{font-family:var(--cc-sans);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--cacs-cyan-400);align-self:center;border-left:1px solid rgba(127,224,236,.35);padding-left:.6rem} .cacs-auth__brandname{font-family:var(--cc-serif);font-weight:400;font-size:2rem;line-height:1.18;margin:0 0 .7rem;color:#fff} .cacs-auth__tagline{font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cacs-cyan-400);margin:0 0 1.1rem} .cacs-auth__statement{font-size:1.02rem;line-height:1.65;color:#C9DAEA;margin:0 0 1.8rem;max-width:38ch} .cacs-auth__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem} .cacs-auth__features li{display:flex;align-items:center;gap:.75rem;font-size:.95rem;color:#DCE7F0;margin:0} .cacs-auth__feat-ico{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(127,224,236,.10);border:1px solid rgba(127,224,236,.22);color:var(--cacs-cyan-400)} .cacs-auth__feat-ico svg{width:17px;height:17px} /* ---- card ---- */ .cacs-auth-card{position:relative;background:var(--a-card);color:var(--a-text); padding:clamp(26px,2.4vw,34px) clamp(30px,3vw,46px) clamp(28px,2.6vw,36px); display:flex;flex-direction:column;justify-content:center;min-width:0} .cacs-auth[data-cacs-theme="light"] .cacs-auth-card{background:linear-gradient(180deg,#FFFFFF,#FFFFFF)} .cacs-auth:not([data-cacs-theme="light"]) .cacs-auth-card{background:linear-gradient(180deg,#0B2748 0%,#081E3A 100%)} .cacs-auth-card__body{width:100%;max-width:480px;margin-inline:auto;text-align:left} .cacs-auth-card--wide .cacs-auth-card__body{max-width:640px} .cacs-auth-card .eyebrow{display:inline-flex;margin:0 0 12px;color:var(--a-accent)} /* .cacs-auth prefix so this beats `.cacs-inner h1{color:navy}` (which would otherwise render the title navy-on-navy = invisible in dark mode). */ .cacs-auth .cacs-auth-card__title{font-family:var(--cc-serif);font-weight:400;font-size:2.05rem;line-height:1.1;margin:0;color:var(--a-text)} .cacs-auth-card__lead{color:var(--a-muted);font-size:1rem;line-height:1.5;margin:10px 0 0;max-width:46ch} .cacs-auth-card--wide .cacs-auth-card__lead{max-width:60ch} .cacs-auth-card__notice{margin:14px 0 0;padding:.6rem .8rem;border-radius:10px;font-size:.92rem;text-align:left; background:color-mix(in srgb,var(--a-accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--a-accent) 30%,transparent);color:var(--a-text)} .cacs-auth-card__required{font-size:.9rem;color:var(--a-muted);text-align:left;margin:14px 0 0} /* ---- registration-complete: single centred card (no two-column shell/ aside - this is a confirmation screen, not a form) ---- */ .cacs-regcomplete-card{ width:100%;max-width:560px;border-radius:18px;overflow:hidden; box-shadow:var(--a-card-shadow),0 0 0 1px var(--a-line); } .cacs-regcomplete-card .cacs-auth-card__body{text-align:center} .cacs-regcomplete-icon{ display:inline-flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:50%;margin:0 auto 14px; background:color-mix(in srgb,var(--ok-green,#1E7A4C) 14%,transparent); color:var(--ok-green,#1E7A4C); } .cacs-regcomplete-icon svg{width:28px;height:28px} .cacs-regcomplete-card .eyebrow{display:inline-flex} .cacs-regcomplete-card .cacs-auth-card__lead{max-width:none;margin-left:auto;margin-right:auto} .cacs-regcomplete-actions{ display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:26px;text-align:left; } .cacs-regcomplete-action{width:100%} @media (max-width:520px){ .cacs-regcomplete-actions{grid-template-columns:1fr} } /* ---- form spacing budget (matches approved prototype) ---- */ .cacs-auth-form{text-align:left;margin-top:26px} .cacs-auth--submit .cacs-auth-form{margin-top:22px} .cacs-auth-form--wide{margin-top:20px} .cacs-auth-form fieldset.fields,.cacs-auth-form fieldset.identity,.cacs-auth-form fieldset.consent,.cacs-auth-form fieldset.reviewer{border:none;margin:0;padding:0} /* Neutralise OJS core frontend form chrome that inflates the card height: core makes fieldset.fields a grid and puts ~34px padding-bottom on every field row, and lets the screen-reader legend occupy ~23px. Reset all three for the simple login/reset fieldset (the wide register .fields grid is handled separately below). */ .cacs-auth-form fieldset.fields{display:block !important} .cacs-auth-form fieldset.fields>.cacs-field,.cacs-auth-form fieldset.fields>.cacs-field-check,.cacs-auth-form fieldset.fields>.cacs-auth-form__buttons,.cacs-auth-form fieldset.fields>.cacs-auth-card__switch{padding-bottom:0 !important} .cacs-auth-form .pkp_screen_reader,.cacs-auth-form legend.pkp_screen_reader{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;display:block !important} .cacs-field{margin:0} .cacs-field + .cacs-field{margin-top:22px} /* Force a normal single-line label: OJS core frontend CSS sets form labels to display:grid (and .required to display:block), which stacks the required asterisk on its own row and doubles every field's height — the reappearance of the "fields too far apart" problem. display is forced here; the .cacs-auth scope keeps it off every other surface. */ .cacs-auth-form .cacs-field>label,.cacs-auth-form .cacs-field__labelrow label,.cacs-auth-form .cacs-field .label{display:block !important;margin-bottom:8px;font-size:15px;font-weight:600;color:var(--a-text)} .cacs-auth-form .required{display:inline !important;color:var(--err-red);font-weight:700;margin-left:.15rem} .cacs-field__labelrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1rem;margin-bottom:8px} .cacs-auth-form .cacs-field__labelrow>label{margin-bottom:0} .cacs-field__labelrow label{margin:0} .cacs-auth-form__forgot{font-size:14px;font-weight:600;white-space:nowrap;color:var(--a-accent)} .cacs-auth-form__forgot:hover{text-decoration:underline;color:var(--a-accent)} /* form controls: 52px inputs, 11px radius, 16px text — themed via vars */ .cacs-auth-form input[type="text"],.cacs-auth-form input[type="email"], .cacs-auth-form input[type="password"],.cacs-auth-form input[type="url"], .cacs-auth-form input[type="tel"],.cacs-auth-form input[type="number"], .cacs-auth-form input[type="search"],.cacs-auth-form select,.cacs-auth-form textarea{ width:100%;height:52px;min-height:52px;border-radius:11px;border:1px solid var(--a-field-line); background:var(--a-field);color:var(--a-text);font-family:var(--cc-sans);font-size:16px; padding:0 16px;box-shadow:none;transition:border-color .15s,box-shadow .15s} .cacs-auth-form textarea{height:auto;min-height:100px;padding:12px 16px;line-height:1.6} .cacs-auth-form input::placeholder,.cacs-auth-form textarea::placeholder{color:var(--a-muted);opacity:.75} .cacs-auth-form input:focus,.cacs-auth-form select:focus,.cacs-auth-form textarea:focus{ border-color:var(--a-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-accent) 28%,transparent);background:var(--a-field);outline:none} .cacs-field-check{display:flex;align-items:center;gap:.55rem;margin:20px 0 0} .cacs-field-check label{margin:0;font-weight:400;color:var(--a-text);font-size:14.5px;line-height:1.4} .cacs-field-check input[type="checkbox"]{width:20px;height:20px;flex:none;accent-color:var(--cacs-teal-600)} .cacs-auth-form__buttons{margin-top:24px} .cacs-auth-form .cacs-btn{min-height:52px;height:52px;font-size:16px;font-weight:600} .cacs-auth-form .cacs-btn-block,.cacs-auth-form__buttons .cacs-btn-block{width:100%;white-space:normal} .cacs-auth-card__switch{margin-top:20px;text-align:center;font-size:14.5px;color:var(--a-muted)} .cacs-auth-card--wide .cacs-auth-card__switch{text-align:left} .cacs-auth-card__switch a{font-weight:700;color:var(--a-accent)} .cacs-auth-card__switch a:hover{text-decoration:underline;color:var(--a-accent)} /* password show/hide control (inside the input) */ .cacs-auth .cacs-inputwrap{position:relative;display:block} .cacs-auth .cacs-inputwrap>input{width:100%;padding-right:3.1rem} .cacs-pass-toggle{position:absolute;top:0;right:0;height:100%;width:3rem;display:inline-flex; align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer; color:var(--a-muted);opacity:.9;border-radius:0 11px 11px 0} .cacs-pass-toggle:hover{opacity:1;color:var(--a-accent)} .cacs-pass-toggle:focus-visible{outline:2px solid var(--a-accent);outline-offset:-2px} .cacs-pass-toggle svg{width:20px;height:20px} .cacs-pass-toggle .icon-eye-off{display:none} .cacs-pass-toggle.is-visible .icon-eye{display:none} .cacs-pass-toggle.is-visible .icon-eye-off{display:inline-flex} /* appearance toggle base (used only inside the light top bar) */ .cacs-appearance-toggle{display:inline-flex;align-items:center;gap:.4rem;min-height:2.05rem;padding:.34rem .8rem; border-radius:999px;cursor:pointer;font-family:var(--cc-sans);font-size:13px;font-weight:600;line-height:1; transition:background-color .15s ease,border-color .15s ease} .cacs-appearance-toggle:focus-visible{outline:2px solid var(--cacs-teal-500);outline-offset:2px} .cacs-appearance-toggle svg{width:16px;height:16px;flex:none} .cacs-appearance-toggle .ca-moon{display:none} .cacs-appearance-toggle .ca-sun{display:inline-flex} .cacs-appearance-toggle .ca-label-dark{display:none} .cacs-appearance-toggle .ca-label-light{display:inline} .cacs-auth[data-cacs-theme="light"] .cacs-appearance-toggle .ca-sun{display:none} .cacs-auth[data-cacs-theme="light"] .cacs-appearance-toggle .ca-moon{display:inline-flex} .cacs-auth[data-cacs-theme="light"] .cacs-appearance-toggle .ca-label-light{display:none} .cacs-auth[data-cacs-theme="light"] .cacs-appearance-toggle .ca-label-dark{display:inline} /* error text readable in dark */ .cacs-auth .pkp_form_error,.cacs-auth .error{color:#FFC9C9} .cacs-auth[data-cacs-theme="light"] .pkp_form_error,.cacs-auth[data-cacs-theme="light"] .error{color:var(--err-red)} /* ---- register: native .fields groups arranged into 2-column pairs ---- */ .cacs-auth-form--wide fieldset.identity,.cacs-auth-form--wide fieldset.login,.cacs-auth-form--wide fieldset.consent,.cacs-auth-form--wide fieldset.reviewer{border:none;margin:0 0 22px;padding:0} .cacs-auth-form--wide fieldset>legend{display:block;width:100%;font-family:var(--cc-serif);font-size:1.15rem;color:var(--a-text);padding:0 0 .3rem;margin-bottom:16px;border-bottom:1px solid var(--a-field-line)} .cacs-auth-form--wide fieldset>legend.pkp_screen_reader{border:none} .cacs-inner .cacs-auth-form--wide .fields{display:grid !important;grid-template-columns:1fr 1fr !important;gap:18px 20px} .cacs-inner .cacs-auth-form--wide .fields>div{margin:0;min-width:0} .cacs-inner .cacs-auth-form--wide .fields .affiliation,.cacs-inner .cacs-auth-form--wide .fields .optin,.cacs-inner .cacs-auth-form--wide .fields .reviewer_interests,.cacs-inner .cacs-auth-form--wide .fields .reviewer_nocontext_interests{grid-column:1/-1} .cacs-auth-form .fields .label{display:block;margin-bottom:8px;font-size:15px;font-weight:600;color:var(--a-text)} .cacs-auth-form label{display:block} /* opt-in / consent checkbox rows: block label w/ absolutely-positioned box so the inline privacy link stays inside the sentence flow. */ .cacs-auth-form .optin label,.cacs-auth-form .reviewer .optin label{display:block;position:relative;padding-left:1.65rem;font-weight:400;font-size:.95rem;color:var(--a-text);line-height:1.5;margin-bottom:.6rem} .cacs-auth-form .optin input[type="checkbox"]{position:absolute;left:0;top:.2rem;margin:0} .cacs-auth-form .consent,.cacs-auth-form .reviewer{border-radius:12px;padding:16px; background:color-mix(in srgb,var(--a-field) 60%,transparent);border:1px solid var(--a-field-line)} .cacs-auth-form .reviewer .reviewer_interests .label,.cacs-auth-form .reviewer_nocontext_interests .label{margin-top:.5rem} /* ---- submission-context steps strip ---- */ .cacs-auth-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;list-style:none;margin:18px 0 0;padding:0;min-width:0} .cacs-auth-steps__item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;min-width:0} .cacs-auth-steps__label{overflow-wrap:break-word;word-break:break-word;hyphens:auto;font-size:.72rem;line-height:1.25;color:var(--a-muted);font-weight:600} .cacs-auth-steps__item::before{content:"";position:absolute;top:13px;left:calc(-50% + 13px);width:calc(100% - 26px);height:2px;background:var(--a-field-line)} .cacs-auth-steps__item:first-child::before{display:none} .cacs-auth-steps__num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--a-field);border:1.5px solid var(--a-field-line);color:var(--a-muted);font-size:.82rem;font-weight:700;position:relative;z-index:1} .cacs-auth-steps__item.is-current .cacs-auth-steps__num{background:var(--cacs-teal-600);border-color:var(--cacs-teal-500);color:#fff} .cacs-auth-steps__item.is-current .cacs-auth-steps__label{color:var(--a-text)} /* ---- slim auth legal footer ---- */ .cacs-auth-legal{flex:none;box-sizing:border-box;background:#fff;border-top:1px solid #E3E9EF} .cacs-auth-legal__inner{max-width:1240px;margin:0 auto;padding:12px clamp(16px,3vw,44px);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:12.5px;color:#5A6B7A} .cacs-auth-legal__inner a{color:#5A6B7A;text-decoration:none} .cacs-auth-legal__inner a:hover{color:var(--cacs-teal-700);text-decoration:underline} @keyframes cacsAuthGlow{0%,100%{opacity:.32}50%{opacity:.72}} /* ---- responsive ---- */ @media (max-width:900px){ .cacs-auth__shell,.cacs-auth--wide .cacs-auth__shell{grid-template-columns:1fr;max-width:560px} .cacs-auth__aside{min-height:auto;padding:34px 30px} .cacs-auth__statement{display:none} .cacs-auth__features{flex-direction:row;flex-wrap:wrap;gap:.6rem 1.2rem} .cacs-auth__features li{font-size:.85rem} .cacs-auth-card__body,.cacs-auth-card--wide .cacs-auth-card__body{max-width:none} } @media (max-width:640px){ /* stack the register name/email pairs on phones */ .cacs-inner .cacs-auth-form--wide .fields{grid-template-columns:1fr !important;gap:0} .cacs-inner .cacs-auth-form--wide .fields>div + div{margin-top:22px} } @media (max-width:560px){ .cacs-auth-topbar{padding:.5rem 16px;min-height:60px} .cacs-auth-topbar__brand img{height:32px} .cacs-auth-topbar__back span{display:none} .cacs-auth-stage{padding:16px} .cacs-auth__wordmark b{font-size:2.3rem} .cacs-auth__brandname{font-size:1.6rem} .cacs-auth-card{padding:24px 20px} } @media (prefers-reduced-motion:reduce){ .cacs-auth__aside::after{animation:none;opacity:.5} .cacs-pass-toggle,.cacs-appearance-toggle,.cacs-auth-lang a,.cacs-auth-form input{transition:none} } /* ---------- Search page ---------- */ /* Kill the theme's older `.page_search .cmp_form` beige (--cacs-color-surface) panel + grid padding (pages.css). Equal specificity, loaded later, so this wins and the search-bar / filter cards sit on the page background. */ .cacs-inner .cmp_form{background:none;border:none;padding:0;margin:0;display:block;gap:0} .cacs-search-form{margin:0 0 var(--sp-6)} .cacs-search-bar{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:.5rem .5rem .5rem 1rem;transition:border-color .15s ease,box-shadow .15s ease} .cacs-search-bar:focus-within{border-color:var(--cacs-teal-600);box-shadow:0 0 0 3px rgba(1,146,166,.15)} .cacs-search-bar__icon{display:flex;color:var(--cacs-gray-600);flex:none} .cacs-search-bar input[type="search"]{flex:1;min-width:0;min-height:auto;border:none;box-shadow:none;padding:.6rem 0;font-size:1.05rem;background:transparent} .cacs-search-bar input[type="search"]:focus{border:none;box-shadow:none;outline:none} .cacs-search-bar__submit{flex:none;min-height:44px} .cacs-search-filters{border:1px solid var(--cacs-gray-300);border-radius:var(--radius-m);background:#fff;padding:var(--sp-4) var(--sp-5);margin:0} .cacs-search-filters legend{font-family:var(--cc-serif);font-size:1.15rem;color:var(--cacs-navy-900);padding:0 .5rem;margin-left:-.5rem} .cacs-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-5);margin-top:var(--sp-3)} .cacs-filter .label,.cacs-filter label.label{display:block;margin-bottom:.4rem} .cacs-filter--date>.label{display:block;margin-bottom:.4rem} /* Native html_select_date_a11y renders a
+3 labelled