and decides
which buttons exist based on who is logged in.
--------------------------------------------------------------------- */
.cardnav-wrap {
position: sticky;
top: 0.8rem;
z-index: 300;
padding: 0.8rem 1.25rem 0;
}
.cardnav {
max-width: 980px;
margin: 0 auto;
background: #1b2236;
border: 1px solid #2f3850;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.cardnav__bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.8rem;
}
/* Hamburger → X. Two bars that rotate when .cardnav--open. */
.cardnav__burger {
justify-self: start;
width: 40px;
height: 40px;
border: 1px solid #41496a;
border-radius: 9px;
background: transparent;
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.cardnav__burger:hover { border-color: var(--gold); }
.cardnav__burger span {
display: block;
width: 18px;
height: 2px;
background: #f2eee3;
transition: transform 0.3s ease;
}
.cardnav--open .cardnav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
.cardnav--open .cardnav__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
.cardnav__actions {
justify-self: end;
display: flex;
align-items: center;
gap: 0.45rem;
}
.cn-btn {
font-family: var(--font-label);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.55rem 0.85rem;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.cn-btn--gold { background: var(--gold); color: #14110c; }
.cn-btn--gold:hover { background: var(--gold-soft); }
.cn-btn--ghost { background: transparent; color: #e8e2d2; border-color: #41496a; }
.cn-btn--ghost:hover { border-color: var(--gold); color: #fff; }
.cn-btn--red { background: var(--red); color: #fff; }
.cn-btn--red:hover { background: var(--red-soft); }
/* The expanding panel. max-height animates because height can't. */
.cardnav__panel {
max-height: 0;
opacity: 0;
transition: max-height 0.45s ease, opacity 0.3s ease;
}
.cardnav--open .cardnav__panel { max-height: 420px; opacity: 1; }
.cardnav__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.7rem;
padding: 0.2rem 0.8rem 0.8rem;
}
.cn-card {
border-radius: 10px;
padding: 0.85rem 1rem 1rem;
min-height: 132px;
display: flex;
flex-direction: column;
border: 1px solid #2f3850;
}
.cn-card__label {
font-family: var(--font-label);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
}
.cn-card__links {
margin-top: auto;
padding-top: 0.9rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cn-card__link {
color: #f2eee3;
text-decoration: none;
font-size: 1.05rem;
display: inline-flex;
align-items: baseline;
gap: 0.45rem;
transition: transform 0.15s ease, color 0.15s ease;
}
.cn-card__link::before { content: '↗'; font-size: 0.8rem; color: var(--gold); }
.cn-card__link:hover { color: var(--gold-soft); transform: translateX(4px); }
@media (max-width: 760px) {
/* On phones the right-side buttons move into the cards. */
.cardnav__actions .cn-btn--ghost { display: none; }
.cardnav__cards { grid-template-columns: 1fr; }
.cn-card { min-height: 0; }
}
/* ---------------------------------------------------------------------
45. INTRO ANIMATION (landing page only)
The logo slides up from the bottom, holds a beat, then the camera
dives through the counter (the hole) of the "o" in DeMolay. Built
from three CSS animations; landing.js adds the classes in sequence
and removes the overlay at the end. Plays once per browser session;
skipped entirely for visitors who prefer reduced motion.
--------------------------------------------------------------------- */
.dm-intro {
position: fixed;
inset: 0;
background: #10131e;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; /* click anywhere to skip */
}
.dm-intro__logo {
width: min(72vw, 560px);
height: auto;
opacity: 0;
transform: translateY(60vh);
/* The dive aims at the counter of the "O" in "DEMOLAY" — these
percentages are where that hole sits inside the official logo SVG. */
transform-origin: 56% 52%;
will-change: transform, opacity;
}
.dm-intro--slide .dm-intro__logo {
animation: dmIntroSlide 1.15s cubic-bezier(0.16, 0.8, 0.3, 1) forwards;
}
.dm-intro--zoom .dm-intro__logo {
animation: dmIntroZoom 1.05s cubic-bezier(0.7, 0, 0.85, 0.4) forwards;
}
.dm-intro--fade { animation: dmIntroFade 0.45s ease forwards; }
@keyframes dmIntroSlide {
0% { opacity: 0; transform: translateY(60vh); }
40% { opacity: 1; }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes dmIntroZoom {
0% { opacity: 1; transform: scale(1); }
85% { opacity: 1; }
100% { opacity: 0; transform: scale(44); }
}
@keyframes dmIntroFade { to { opacity: 0; } }
/* While the intro runs, the page behind it must not scroll. */
html.dm-intro-active { overflow: hidden; }
/* ---------------------------------------------------------------------
46. LANDING v1.1 — parents box + contact section
--------------------------------------------------------------------- */
.landing__parents {
border: 1px solid var(--rule);
border-left: 4px solid var(--gold);
background: var(--paper-tint);
padding: 1.1rem 1.4rem;
margin-top: 1.5rem;
}
.landing__parents h3 {
font-family: var(--font-label);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 0.5rem;
}
.landing__parents p { margin: 0 0 0.6rem; color: var(--ink-soft); }
.landing__parents p:last-child { margin-bottom: 0; }
.landing__contact {
text-align: center;
border-bottom: none;
padding-bottom: 3.5rem;
}
.landing__contact .landing__intro { margin: 0 auto 1rem; }
.landing__contact-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.4rem;
}
.landing__contact-note {
color: var(--ink-soft);
font-style: italic;
font-size: 0.98rem;
margin-top: 1rem;
}
/* ---------------------------------------------------------------------
47. PROFILE PAGE
--------------------------------------------------------------------- */
.profile-rows { margin: 1.25rem 0; }
.profile-row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--paper-edge);
}
.profile-row dt {
font-family: var(--font-label);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0;
}
.profile-row dd { margin: 0; text-align: right; }
.role-pill {
display: inline-block;
font-family: var(--font-label);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--rule);
}
.role-pill--admin { border-color: var(--gold); color: var(--gold); }
/* ---------------------------------------------------------------------
48. SMALL FIXES
--------------------------------------------------------------------- */
/* Multi-line messages in dialogs (e.g. the member-code dialog) keep
their line breaks instead of collapsing into one long sentence. */
.modal__body { white-space: pre-line; }
/* ---------------------------------------------------------------------
49. v1.2 — NEWSPAPER RETIREMENT
The dark theme is now global (tokens in section 1), so the loud
newspaper props get retired here: blackletter is gone (--font-mast
became Cinzel, and since v2.12 the one body font), highlights get
readable text, and the masthead is resized.
--------------------------------------------------------------------- */
.masthead__title {
font-weight: 700;
font-size: clamp(2.1rem, 5.5vw, 3.6rem);
letter-spacing: 0.04em;
}
/* Text highlights have a fixed light-yellow background — the dark
theme's light ink would vanish on it, so pin the text color dark. */
/* "From the archive" banner used a hardcoded cream. */
/* The archive: wood-and-manila skeuomorphism → dark professional cards. */
.drawer {
background: var(--paper-tint);
border: 1px solid var(--rule);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}
.drawer__label {
background: #10131e;
color: var(--ink);
border-color: #14110c;
}
.drawer__pull {
background: linear-gradient(180deg, #454d68 0%, #262d40 100%);
border-color: #14110c;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.folder {
background: #222a3e;
border-color: #3a4258;
}
.folder__tab {
background: var(--gold);
border-color: var(--gold-soft);
color: #14110c;
}
/* The small × delete/cancel buttons used a red too dark to see. */
.folder__delete,
.schedule__cancel,
.event__cancel { color: #e05b5b; }
.folder__delete:hover,
.schedule__cancel:hover,
.schedule__cancel:focus-visible,
.event__cancel:hover,
.event__cancel:focus-visible {
background: #e05b5b;
color: #14110c;
border-color: #e05b5b;
}
/* ---------------------------------------------------------------------
50. READABILITY PASS
Bigger, brighter, no italics-at-small-sizes. The --ink-soft token was
also brightened in section 1 — these are the size/spacing half.
--------------------------------------------------------------------- */
.landing p,
.landing li { font-size: 1.07rem; line-height: 1.65; }
.landing__virtues span { font-style: normal; font-size: 1rem; }
.landing__contact-note { font-style: normal; }
.form__hint { font-style: normal; }
/* ---------------------------------------------------------------------
51. FUSED PANELS (landing)
Text and its neighbouring photo live in ONE box: the text half is
padded, the photo half runs flush to the box edge, and a single
border wraps both.
--------------------------------------------------------------------- */
.landing__hero {
grid-template-columns: 1.05fr 0.95fr;
gap: 0;
align-items: stretch;
padding: 0;
margin-top: 2rem;
border: 1px solid var(--paper-edge);
border-radius: 14px;
background: var(--paper-tint);
overflow: hidden;
}
.landing__hero-text {
padding: 2.75rem 2.5rem;
align-self: center;
}
.landing__two-col {
gap: 0;
align-items: stretch;
border: 1px solid var(--paper-edge);
border-radius: 14px;
background: var(--paper-tint);
overflow: hidden;
}
.landing__two-col > div { padding: 2.5rem; }
/* Inside a fused panel the photo loses its own frame — the panel IS
the frame — and stretches to fill its half completely. */
.landing__hero .photo-slot,
.landing__two-col .photo-slot { display: flex; }
.landing__hero .photo-slot__frame,
.landing__two-col .photo-slot__frame {
border: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
height: 100%;
min-height: 340px;
aspect-ratio: auto;
flex: 1;
}
/* The parents box sits ON a panel now — go a step darker to separate. */
.landing__parents { background: rgba(0, 0, 0, 0.35); }
/* Rounded corners for the already-boxed sections too. */
.landing__section--tint { border-radius: 14px; }
@media (max-width: 860px) {
.landing__hero .photo-slot__frame,
.landing__two-col .photo-slot__frame { min-height: 240px; }
.landing__hero-text,
.landing__two-col > div { padding: 1.75rem 1.4rem; }
}
/* ---------------------------------------------------------------------
52. MASTHEAD LOGO (landing page)
The official wordmark replaces the typeset title on the homepage.
--------------------------------------------------------------------- */
.masthead__logo { margin: 1rem 0 1.1rem; }
.masthead__logo img {
width: min(440px, 78vw);
height: auto;
display: block;
margin: 0 auto;
}
/* ---------------------------------------------------------------------
53. BLUR-TEXT REVEAL (React Bits style)
landing.js tags text elements with .blur-reveal and a per-element
--reveal-delay, then flips body.reveal-go — everything sharpens out
of a blur, staggered top to bottom. The class is ONLY ever added by
JS, so without JS nothing is hidden.
--------------------------------------------------------------------- */
.blur-reveal {
opacity: 0;
filter: blur(10px);
transform: translateY(14px);
}
body.reveal-go .blur-reveal {
opacity: 1;
filter: blur(0);
transform: none;
transition:
opacity 0.7s ease,
filter 0.7s ease,
transform 0.7s ease;
transition-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
.blur-reveal { opacity: 1; filter: none; transform: none; }
}
/* ---------------------------------------------------------------------
54. TRICOLOR — the flag, worn quietly
The three nav cards wear the flag, in order: red, yellow, blue.
--------------------------------------------------------------------- */
.cn-card--a { background: #251314; border-color: #43201f; }
.cn-card--a .cn-card__label,
.cn-card--a .cn-card__link::before { color: #e25b5b; }
.cn-card--b { background: #272110; border-color: #463a14; }
.cn-card--b .cn-card__label,
.cn-card--b .cn-card__link::before { color: #fcd116; }
.cn-card--c { background: #121a2c; border-color: #233457; }
.cn-card--c .cn-card__label,
.cn-card--c .cn-card__link::before { color: #6f95e8; }
/* ---------------------------------------------------------------------
55. RED ACCENTS — here and there, not everywhere
(v1.3: the kicker dashes and heading underline bars were removed at
the owner's request — they read as misaligned clutter. The red now
lives only where it's structural: card-title underlines, the footer
rule, and the danger buttons.)
--------------------------------------------------------------------- */
/* The footer gets a thin red rule on top. */
/* ---------------------------------------------------------------------
56. v1.3 FIXES & FEATURES
--------------------------------------------------------------------- */
/* THE LOGIN-PAGE BUG, fixed for the whole site: the browser's default
for the hidden attribute is display:none, but ANY author rule that
sets display (like `.form { display:flex }`) silently wins over it.
That's why both login forms were visible at once, stacked into each
other. This rule makes `hidden` actually mean hidden, always. */
[hidden] { display: none !important; }
/* Breathing room between a form's fields and its buttons. */
.form__actions { margin-top: 0.5rem; }
/* Virtues: flexbox instead of a grid, so the last row (3 of 7) sits
CENTERED instead of hugging the left edge. */
.landing__virtues {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.1rem 2rem;
}
.landing__virtues li { flex: 0 1 250px; }
/* Each virtue is now a quiet link to its own page. */
.landing__virtues a {
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
/* The nav's left cluster: burger + the DeMolay Monthly button. */
.cardnav__left {
justify-self: start;
display: flex;
align-items: center;
gap: 0.45rem;
}
/* Patch notes — a quiet version button in the footer, master-only
(auth.js injects it only for the admin session). */
.colophon__version {
font-family: var(--font-label);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
background: transparent;
color: var(--ink-soft);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 0.45rem 0.85rem;
margin-top: 0.9rem;
cursor: pointer;
}
.colophon__version:hover { color: var(--gold); border-color: var(--gold); }
/* The patch-notes list inside the modal. */
.patchnotes {
max-height: 55vh;
overflow-y: auto;
margin: 0.5rem 0 0;
padding: 0;
list-style: none;
text-align: left;
}
.patchnotes li {
border-top: 1px solid var(--paper-edge);
padding: 0.8rem 0.2rem;
}
.patchnotes__version {
font-family: var(--font-label);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.18em;
color: var(--gold);
margin-right: 0.6rem;
}
.patchnotes p { margin: 0.35rem 0 0; color: var(--ink-soft); }
/* The single-virtue page (virtute.html). */
.virtue-page { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem; }
.virtue-page__nav {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 2.5rem;
flex-wrap: wrap;
}
/* ---------------------------------------------------------------------
57. v1.4 — TRUE CENTERING for the masthead rules
The old layout was flexbox space-between, which only LOOKS centered
when the left and right texts happen to be the same width. With
"BULETINUL JURISDICȚIEI … DOAR PENTRU MEMBRI" they aren't, so the
middle text ("11 IUNIE 2026", "LEADERSHIP") drifted. A 1fr|auto|1fr
grid pins the middle cell to the page's actual center.
--------------------------------------------------------------------- */
/* Removed in v3.0: the masthead rule row (.masthead__rule) no longer exists. */
/* ---------------------------------------------------------------------
58. @TAGS + MINI-PROFILES
--------------------------------------------------------------------- */
.user-tag {
color: var(--gold);
text-decoration: none;
font-weight: 600;
}
.user-tag:hover { text-decoration: underline; color: var(--gold-soft); }
/* The mini-profile card on user.html. */
.user-card { text-align: center; }
.user-card .role-pill { margin-top: 0.25rem; }
.user-card__handle {
color: var(--gold);
font-weight: 600;
margin: 0.2rem 0 0.8rem;
}
/* ---------------------------------------------------------------------
59. EDITABLE TEXT CHIPS (master-only, injected by editable.js)
--------------------------------------------------------------------- */
.edit-text-chip {
display: inline-flex;
align-items: center;
font-family: var(--font-label);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
background: transparent;
border: 1px dashed var(--rule);
border-radius: 6px;
padding: 0.25rem 0.55rem;
margin: 0.2rem 0 0.8rem;
cursor: pointer;
opacity: 0.65;
}
.edit-text-chip:hover { opacity: 1; border-color: var(--gold); }
/* ---------------------------------------------------------------------
60. LANDING "READ MORE" CTAs (the explore-the-site links)
--------------------------------------------------------------------- */
.landing__more {
margin-top: 1.25rem;
}
.landing__more a {
font-family: var(--font-label);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
text-decoration: none;
}
.landing__more a:hover { color: var(--gold-soft); text-decoration: underline; }
/* ---------------------------------------------------------------------
61. v1.5 — PRESENTATION POLISH
--------------------------------------------------------------------- */
/* Keyboard users get a clear gold focus ring everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* Anchor jumps (#virtuti, #contact) glide instead of teleporting. */
html { scroll-behavior: smooth; }
/* Footer links show their gold on hover. */
.colophon a:hover { color: var(--gold); }
/* ------- The virtue page, dressed up ------- */
.virtue-page__panel {
background: var(--paper-tint);
border: 1px solid var(--paper-edge);
border-radius: 14px;
padding: 2.25rem 2.25rem 2rem;
}
.virtue-page__numeral {
font-family: var(--font-label);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.32em;
color: var(--gold);
margin: 0 0 0.6rem;
}
.virtue-page__title {
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.8rem, 4vw, 2.4rem);
line-height: 1.15;
margin: 0 0 0.4rem;
}
.virtue-page__motto {
font-size: 1.18rem;
color: var(--ink-soft);
margin: 0 0 1.4rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--paper-edge);
}
.virtue-page__body p {
font-size: 1.07rem;
line-height: 1.7;
}
/* The takeaway callout — same family as the "Pentru părinți" box. */
.virtue-page__practice {
border: 1px solid var(--rule);
border-left: 4px solid var(--gold);
background: rgba(0, 0, 0, 0.35);
border-radius: 0 10px 10px 0;
padding: 1rem 1.3rem;
margin-top: 1.6rem;
}
.virtue-page__practice h3 {
font-family: var(--font-label);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 0.4rem;
}
.virtue-page__practice p {
margin: 0;
color: var(--ink-soft);
line-height: 1.6;
}
.virtue-page__nav .btn { border-radius: 8px; }
/* ---------------------------------------------------------------------
62. v1.6 — LIVE TAG HIGHLIGHT in the article editor
While writing, a valid @username lights up the moment it's complete,
so the author KNOWS the tag will work before publishing. Added by
editor.js around the matched text; stripped again before the article
is saved, so stored content stays plain.
--------------------------------------------------------------------- */
.tag-live {
color: var(--gold);
font-weight: 600;
background: rgba(217, 168, 38, 0.14);
border-radius: 4px;
padding: 0 0.12em;
box-shadow: 0 0 0 1px rgba(217, 168, 38, 0.35) inset;
}
/* ---------------------------------------------------------------------
63. v1.7 — virtue definition opener + closing line
--------------------------------------------------------------------- */
.virtue-page__definition {
font-size: 1.2rem;
line-height: 1.7;
color: var(--ink);
font-style: italic;
}
/* (.virtue-page__closing lived here until v2.11, when the shared
closing sentence was removed from the virtue pages.) */
/* ---------------------------------------------------------------------
64. v1.7 — HERO THREE-LINE STRUCTURE (style guide homepage hero)
--------------------------------------------------------------------- */
.landing__hero-lines {
display: flex;
flex-direction: column;
gap: 0.15rem;
line-height: 1.1;
}
.landing__hero-lines span { display: block; }
.landing__hero-lines span:nth-child(2) { color: var(--ink-soft); }
.landing__hero-lines span:nth-child(3) { color: var(--gold); }
/* ---------------------------------------------------------------------
65. v1.7 — STATISTICS BANNER (number + ALL CAPS description)
--------------------------------------------------------------------- */
.stats-banner {
max-width: var(--max-width);
margin: 2.25rem auto;
padding: 0 1.25rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.stat-block {
border: 1px solid var(--paper-edge);
border-left: 4px solid var(--gold);
border-radius: 12px;
background: var(--paper-tint);
padding: 1.5rem 1.6rem;
}
.stat-block__num {
display: block;
font-family: var(--font-label);
font-weight: 700;
font-size: clamp(2.4rem, 5vw, 3.4rem);
color: var(--gold);
line-height: 1;
}
.stat-block__text {
display: block;
margin-top: 0.6rem;
font-family: var(--font-label);
font-size: 0.74rem;
letter-spacing: 0.12em;
line-height: 1.5;
text-transform: uppercase;
color: var(--ink-soft);
}
@media (max-width: 700px) {
.stats-banner { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------
66. v1.7 — "Un DeMolay:" CODE BLOCK (recurring values list)
--------------------------------------------------------------------- */
/* Removed in v2.13 with the "Codul DeMolay" section of descopera.html,
at Matei's request. The number stays so the sections keep their order. */
/* ---------------------------------------------------------------------
67. v1.7 — MUTED BLURRED BACKGROUND (haikei blobs, toned down)
A fixed, heavily-blurred scene sits behind everything. Because it's
blurred and low-contrast, it reads as soft warm/cool glows in the
corners over the slate-blue base, never competing with the content.
Cards and photo frames keep their opaque --paper-tint, so text
surfaces stay solid dark blue exactly as before.
--------------------------------------------------------------------- */
body::before {
content: '';
position: fixed;
inset: -10vmax; /* overscan so the blur has no hard edge */
z-index: -1;
background: var(--paper) url("bg.svg") center / cover no-repeat;
filter: blur(70px) saturate(0.85);
opacity: 0.5;
pointer-events: none;
}
/* ---------------------------------------------------------------------
68. v1.8 — CHAPTER RANKS + BYLAWS
--------------------------------------------------------------------- */
.rank-pill {
display: inline-block;
font-family: var(--font-label);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.12em;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: var(--gold);
color: #14110c;
}
.rank-until {
display: block;
font-size: 0.8rem;
color: var(--ink-soft);
margin-top: 0.25rem;
}
.muted { color: var(--ink-soft); }
/* Bylaws editor */
.bylaws {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 1.2rem;
margin-top: 0.5rem;
}
.bylaws__field { display: flex; flex-direction: column; gap: 0.35rem; }
.bylaws__input {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
color: var(--ink-soft);
font-size: 0.85rem;
}
.bylaws__input input {
width: 4.5rem;
background: var(--paper-tint);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 0.5rem 0.6rem;
font: inherit;
}
/* ---------------------------------------------------------------------
69. v1.9 — RANK+CHAPTER BUBBLE (rank and chapter, together)
--------------------------------------------------------------------- */
.rank-bubble {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--paper-tint);
border: 1px solid var(--paper-edge);
border-radius: 999px;
padding: 0.25rem 0.7rem 0.25rem 0.3rem;
font-size: 0.95rem;
}
.rank-bubble__rank {
font-family: var(--font-label);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.1em;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: var(--gold);
color: #14110c;
}
.rank-bubble__chapter { color: var(--ink); padding-right: 0.35rem; }
/* When there's no rank chip, give the chapter a little left padding. */
.rank-bubble__chapter:first-child { padding-left: 0.55rem; }
/* ---------------------------------------------------------------------
70. v1.9 — ROLE TAG chip (@MC / @PC / @CS in article text)
--------------------------------------------------------------------- */
.role-tag {
font-weight: 700;
color: #14110c;
background: var(--gold);
border-radius: 5px;
padding: 0 0.3em;
font-size: 0.95em;
}
/* ---------------------------------------------------------------------
71. v1.9 — NAV NOTIFICATION BELL
--------------------------------------------------------------------- */
.cn-bell {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 9px;
border: 1px solid #3a3f4e;
text-decoration: none;
}
.cn-bell:hover { border-color: var(--gold); }
.cn-bell__icon { font-size: 1rem; filter: grayscale(0.2); }
.cn-bell__count {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-family: var(--font-label);
font-size: 0.66rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ---------------------------------------------------------------------
72. v1.9 — NOTIFICATIONS LIST
--------------------------------------------------------------------- */
.notif { list-style: none; margin: 0; padding: 0; }
.notif__item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.85rem 0.9rem;
border: 1px solid var(--paper-edge);
border-radius: 10px;
margin-bottom: 0.6rem;
text-decoration: none;
color: var(--ink);
background: var(--paper-tint);
}
a.notif__item:hover { border-color: var(--gold); }
.notif__item--unread { border-left: 4px solid var(--gold); }
.notif__badge {
flex: none;
font-family: var(--font-label);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 0.22rem 0.5rem;
border-radius: 999px;
border: 1px solid var(--rule);
color: var(--ink-soft);
}
.notif__badge--tag { color: var(--gold); border-color: var(--gold); }
.notif__badge--role { color: var(--gold); border-color: var(--gold); }
.notif__badge--post { color: #6f95e8; border-color: #6f95e8; }
.notif__text { flex: 1; }
.notif__time { flex: none; color: var(--ink-soft); font-size: 0.82rem; }
/* =====================================================================
73. v2.2 — UI REWORK
Sheds the last newspaper mannerisms and warms the site up: a modern
masthead eyebrow (no boxed rules), softer warm dividers, the seven
virtues as glowing cards, a scroll parallax on the landing, a legible
editor toolbar, and a touch of the background's red/gold warmth.
Appended last, so it wins over the older rules on purpose.
===================================================================== */
/* ---- 73.1 tokens: per-virtue glow colors + warm accents ---- */
:root {
--warm-red: #e0484a;
--warm-gold: #f0c14b;
--v-iubirea: #e0484a; /* Iubirea Filială — red */
--v-veneratia: #a274f0; /* Venerația — purple */
--v-curtoazia: #3f6fe8; /* Curtoazia — royal blue (≠ bg) */
--v-camaraderia: #35c26a; /* Camaraderia — green */
--v-fidelitatea: #86c5ff; /* Fidelitatea — baby blue */
--v-curatenia: #ffffff; /* Curățenia — white */
--v-patriotismul: #f2c94c; /* Patriotismul — gold */
}
/* ---- 73.2 masthead: a quiet professional eyebrow, no print rules ---- */
.masthead {
border-bottom: none;
padding-bottom: 0.85rem;
}
/* One warm hairline replaces the old 4px double newspaper rule. */
.masthead::after {
content: "";
display: block;
height: 1px;
width: min(600px, 84%);
margin: 1.55rem auto 0;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--warm-red) 55%, transparent),
color-mix(in srgb, var(--warm-gold) 62%, transparent),
transparent);
}
.masthead--small { padding-bottom: 0.6rem; }
.masthead--small::after { margin-top: 1.05rem; }
/* ---- 73.3 softer dividers where "lines" still read as print ---- */
/* Footer: the solid red bar becomes a warm gradient hairline. */
.colophon { border-top: none; position: relative; }
.colophon::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--warm-red) 70%, transparent),
color-mix(in srgb, var(--warm-gold) 70%, transparent),
transparent);
}
/* ---- 73.4 the seven virtues, now glowing cards (landing) ---- */
.landing__virtues { gap: 1.3rem; }
.landing__virtues li {
border-top: none;
padding: 0;
position: relative;
--vg: var(--gold); /* default; per-virtue value set below */
}
/* the circular glow that blooms behind the card on hover */
.landing__virtues li::after {
content: "";
position: absolute;
inset: -26%;
border-radius: 50%;
background: radial-gradient(circle,
color-mix(in srgb, var(--vg) 46%, transparent),
transparent 62%);
opacity: 0;
z-index: 0;
pointer-events: none;
transition: opacity 0.38s ease;
}
.landing__virtues li:hover::after,
.landing__virtues li:focus-within::after { opacity: 1; }
/* the roman numeral, tucked inside the card and tinted per virtue */
.landing__virtues li::before {
top: 1.15rem;
left: 1.25rem;
color: var(--vg);
z-index: 2;
}
.landing__virtues a {
position: relative;
z-index: 1;
padding: 1.2rem 1.3rem 1.35rem 3.15rem;
border-radius: 16px;
background: var(--paper-tint);
border: 1px solid var(--paper-edge);
transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}
.landing__virtues a:hover,
.landing__virtues a:focus-visible {
transform: translateY(-4px);
border-color: var(--vg);
box-shadow:
0 0 0 1px var(--vg),
0 12px 34px -8px color-mix(in srgb, var(--vg) 60%, transparent);
}
.landing__virtues a:hover strong,
.landing__virtues a:focus-visible strong { color: var(--vg); }
.landing__virtues li[data-virtue="iubirea-filiala"] { --vg: var(--v-iubirea); }
.landing__virtues li[data-virtue="veneratia"] { --vg: var(--v-veneratia); }
.landing__virtues li[data-virtue="curtoazia"] { --vg: var(--v-curtoazia); }
.landing__virtues li[data-virtue="camaraderia"] { --vg: var(--v-camaraderia); }
.landing__virtues li[data-virtue="fidelitatea"] { --vg: var(--v-fidelitatea); }
.landing__virtues li[data-virtue="curatenia"] { --vg: var(--v-curatenia); }
.landing__virtues li[data-virtue="patriotismul"] { --vg: var(--v-patriotismul); }
/* ---- 73.5 the single virtue page wears its color ---- */
.virtue-page__panel {
border-color: color-mix(in srgb, var(--vg, var(--gold)) 45%, var(--paper-edge));
box-shadow: 0 0 70px -22px color-mix(in srgb, var(--vg, var(--gold)) 60%, transparent);
}
.virtue-page__numeral { color: var(--vg, var(--gold)); }
.virtue-page__motto {
border-bottom-color: color-mix(in srgb, var(--vg, var(--gold)) 34%, var(--paper-edge));
}
.virtue-page__practice { border-left-color: var(--vg, var(--gold)); }
.virtue-page__practice h3 { color: var(--vg, var(--gold)); }
.virtue-page__nav .btn--primary {
background: var(--vg, var(--gold));
border-color: var(--vg, var(--gold));
color: #14110c;
}
/* ---- 73.6 editor toolbar: buttons you can actually see ---- */
.editor__toolbar {
background: var(--paper-tint);
border-bottom: 1px solid var(--paper-edge);
gap: 0.35rem;
padding: 0.6rem;
}
.editor__toolbar button {
background: #2b3450;
color: var(--ink);
border: 1px solid #46527a;
border-radius: 8px;
min-width: 2.3rem;
height: 2.15rem;
font-size: 1.02rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.08s ease;
}
.editor__toolbar button:hover,
.editor__toolbar button:focus-visible {
background: var(--gold);
color: #14110c;
border-color: var(--gold);
}
.editor__toolbar button:active { transform: translateY(1px); }
.editor__toolbar button strong { font-weight: 800; }
.editor__toolbar button mark {
background: #ffe98c;
color: #1f1a14;
padding: 0 0.28em;
border-radius: 3px;
font-weight: 700;
}
/* ---- 73.7 landing parallax gallery (parallax.js drives the motion) ---- */
.parallax {
max-width: var(--max-width);
margin: 2.75rem auto 3rem;
padding: 0 1.25rem;
}
.parallax__intro { text-align: center; margin-bottom: 1.5rem; }
.parallax__stage {
position: relative;
height: clamp(430px, 72vh, 720px);
overflow: hidden;
border-radius: 18px;
border: 1px solid var(--paper-edge);
background: rgba(0, 0, 0, 0.30);
display: flex;
gap: 14px;
padding: 14px;
}
.parallax__col { flex: 1; position: relative; min-width: 0; }
.parallax__col-inner {
position: absolute;
top: 0; left: 0; right: 0;
display: flex;
flex-direction: column;
gap: 14px;
will-change: transform;
}
.parallax__tile {
margin: 0;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 5;
flex: none;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--warm-red) 26%, var(--paper-tint)),
color-mix(in srgb, var(--warm-gold) 22%, var(--paper-tint)));
position: relative;
}
.parallax__tile img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
/* graceful placeholder when a photo file isn't there yet */
.parallax__tile--empty::after {
content: "FOTOGRAFIE";
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-label);
font-size: 0.72rem; letter-spacing: 0.24em;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
/* soft fade at the top/bottom edges so columns bleed in nicely */
.parallax__stage::before,
.parallax__stage::after {
content: "";
position: absolute; left: 0; right: 0;
height: 64px; z-index: 3; pointer-events: none;
}
.parallax__stage::before { top: 0; background: linear-gradient(to bottom, var(--paper), transparent); }
.parallax__stage::after { bottom: 0; background: linear-gradient(to top, var(--paper), transparent); }
@media (max-width: 720px) {
.parallax__col:nth-child(3) { display: none; } /* two columns on phones */
}
/* ---- 73.8 a friendlier, warmer finish ---- */
/* A soft warm bloom behind the hero, drawn from the background's tones. */
.landing__hero { position: relative; }
.landing__hero::before {
content: "";
position: absolute;
inset: -8% -12% 0 -12%;
z-index: -1;
background: radial-gradient(60% 60% at 22% 30%,
color-mix(in srgb, var(--warm-red) 16%, transparent), transparent 70%),
radial-gradient(55% 55% at 82% 24%,
color-mix(in srgb, var(--warm-gold) 15%, transparent), transparent 70%);
pointer-events: none;
}
/* Kickers pick up a hair of warmth over the flat gold. */
.landing__kicker { color: var(--warm-gold); }
/* ---- 73.9 card surfaces: drop the harsh white frame + boxed label ---- */
/* The bright 1px --ink frame and the top/bottom-ruled label were the last
loud print holdovers on the login / support / editor / admin cards. */
.card {
border-color: var(--paper-edge);
border-radius: 16px;
}
.card__label {
border-top: none;
border-bottom: none;
padding: 0;
color: var(--warm-gold);
margin-bottom: 0.8rem;
}
.card__lede { font-style: normal; }
/* =====================================================================
74. v2.3 — REFINEMENT + SOUL
Real photos in the parallax, the masthead eyebrow removed, the virtue
glow fixed so it never floats over a neighbour, centered nav/login
buttons, a hand-drawn minimal bell, and a warmer, friendlier finish.
===================================================================== */
/* ---- 74.1 masthead: drop the eyebrow label strips entirely ---- */
/* The three-label rows read as leftover chrome now; the logo/title plus
the warm hairline carry the header on their own. Back-navigation lives
in the card nav. */
.masthead { padding-top: 1.6rem; }
.masthead--small { padding-top: 1.25rem; }
/* ---- 74.2 virtue glow: keep it under its OWN card, never floating ----
Each tile gets its own stacking context; the hovered one rises above
its neighbours so the bloom reads as "around this card", not a stray
layer drifting over the row above. */
.landing__virtues li { z-index: 1; }
.landing__virtues li:hover,
.landing__virtues li:focus-within { z-index: 3; }
.landing__virtues li::after {
inset: -18%; /* hug the card a little tighter */
}
/* ---- 74.3 centered buttons (virtue nav + login) ---- */
.virtue-page__nav { justify-content: center; }
#member-form .form__actions,
#chapter-form .form__actions { justify-content: center; }
/* ---- 74.4 parallax: let the real photos keep their own shape ----
A genuine "memories wall" — portraits stay tall, group shots stay
wide — instead of everything cropped to one rectangle. */
.parallax__tile { aspect-ratio: auto; background: var(--paper-tint); }
.parallax__tile img { height: auto; }
.parallax__tile--empty {
aspect-ratio: 4 / 5;
background:
linear-gradient(135deg,
color-mix(in srgb, var(--warm-red) 26%, var(--paper-tint)),
color-mix(in srgb, var(--warm-gold) 22%, var(--paper-tint)));
}
/* ---- 74.5 a quieter parallax heading ---- */
.parallax__intro .landing__heading {
font-size: clamp(1.5rem, 3.5vw, 2.1rem);
color: var(--ink);
}
/* ---- 74.6 minimal bell (SVG drawn in auth.js) ---- */
.cn-bell__icon {
display: inline-flex;
align-items: center;
justify-content: center;
filter: none;
}
.cn-bell__icon svg {
width: 20px;
height: 20px;
stroke: var(--ink-soft);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.18s ease, transform 0.18s ease;
}
.cn-bell:hover .cn-bell__icon svg {
stroke: var(--gold);
transform: rotate(-8deg);
}
/* ---- 74.7 warmth + soul: gentle life on the things you touch ---- */
.stat-block {
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.stat-block:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--warm-gold) 55%, transparent);
}
/* The "Pentru părinți" box gets a warm left edge — a reassuring hand. */
.landing__parents {
border-left: 3px solid color-mix(in srgb, var(--warm-red) 60%, transparent);
border-radius: 0 12px 12px 0;
}
/* Buttons ease instead of snapping. */
.btn { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Section headings carry a touch more warmth in their kicker. */
.landing__section .landing__kicker { color: var(--warm-gold); }
/* ---- 74.8 questions (FAQ) page ---- */
.faq h3 {
margin: 1.6rem 0 0.4rem;
color: var(--ink);
font-size: 1.12rem;
}
.faq h3:first-of-type { margin-top: 0.6rem; }
.faq p { color: var(--ink-soft); margin: 0; }
.faq__cta {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2.2rem;
}
/* ---- 74.9 a little soul: links that answer when you reach for them ----
The "read more" trails and footer links grow an underline from the side
you're moving toward, instead of just sitting there. */
.landing__more a,
.colophon a {
position: relative;
text-decoration: none;
}
.landing__more a::after,
.colophon a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 1px;
width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s ease;
}
.landing__more a:hover::after,
.colophon a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* The hero photo frame warms and lifts a hair when you hover the hero. */
.landing__hero .photo-slot__frame {
transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.landing__hero:hover .photo-slot__frame {
box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--warm-gold) 55%, transparent);
}
/* =====================================================================
75. v2.4 — PRIMA IMPRESIE
The landing page finishes what it starts. Empty photo slots become
intentional (warm gradient, emblem watermark, the site's own motto
as a caption) instead of dark boxes; the seven virtues stand at one
height; the page ends strong with a miniature bulletin cover and a
proper contact card; sections rise gently into view on scroll.
===================================================================== */
/* ---- 75.2 the seven virtues stand at one height ----
Each li already stretches to its flex line; the anchor now fills its
li completely, so a long name (Venerația...) no longer leaves its
neighbours looking clipped. */
.landing__virtues a { flex: 1; }
/* ---- 75.3 DeMolay Monthly: the pitch beside a miniature cover ---- */
.landing__monthly { text-align: left; }
.landing__monthly-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: var(--gap);
align-items: center;
max-width: 980px;
margin: 0 auto;
}
.landing__monthly-pitch .landing__intro { margin-left: 0; margin-right: 0; }
/* The cover: a bold masthead, gold hairlines, three suggested headline
bars. All decoration — the real bulletin waits behind the login. */
.monthly-cover {
justify-self: center;
display: flex;
flex-direction: column;
gap: 0.9rem;
width: min(300px, 100%);
aspect-ratio: 3 / 4;
padding: 1.6rem 1.5rem 1.5rem;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--paper-edge));
background:
linear-gradient(165deg,
var(--paper-tint),
color-mix(in srgb, var(--warm-gold) 7%, var(--paper-tint)));
text-decoration: none;
transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}
.monthly-cover:hover,
.monthly-cover:focus-visible {
transform: translateY(-5px) rotate(-0.5deg);
border-color: var(--gold);
box-shadow: 0 18px 44px -18px color-mix(in srgb, var(--warm-gold) 55%, transparent);
}
.monthly-cover__issue {
font-family: var(--font-label);
font-size: 0.6rem;
letter-spacing: 0.24em;
color: var(--ink-soft);
text-align: center;
}
.monthly-cover__masthead {
font-family: var(--font-mast);
font-weight: 700;
font-size: 1.7rem;
line-height: 1.15;
text-align: center;
color: var(--ink);
padding-bottom: 0.9rem;
border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
/* a suggested photo block, echoing the empty-slot gradient */
.monthly-cover__photo {
flex: 1;
border-radius: 8px;
background:
url("emblem.svg") center / 68% no-repeat,
linear-gradient(150deg,
color-mix(in srgb, var(--warm-red) 22%, var(--paper-tint)),
color-mix(in srgb, var(--warm-gold) 16%, var(--paper-tint)));
background-blend-mode: soft-light, normal;
}
.monthly-cover__lines {
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.monthly-cover__lines span {
height: 7px;
border-radius: 4px;
background: color-mix(in srgb, var(--ink-soft) 32%, transparent);
}
.monthly-cover__lines span:first-child {
width: 88%;
background: color-mix(in srgb, var(--gold) 55%, transparent);
}
.monthly-cover__lines span:nth-child(2) { width: 72%; }
.monthly-cover__lines span:last-child { width: 55%; }
@media (max-width: 860px) {
.landing__monthly { text-align: center; }
.landing__monthly-grid { grid-template-columns: 1fr; }
.landing__monthly-pitch .landing__intro { margin-left: auto; margin-right: auto; }
}
/* ---- 75.4 the contact card: the page ends with an embrace ---- */
.landing__contact {
max-width: 880px;
margin: 2.75rem auto 3.5rem;
padding: 2.6rem 2rem 2.4rem;
border-radius: 18px;
border: 1px solid transparent;
background:
linear-gradient(var(--paper-tint), var(--paper-tint)) padding-box,
linear-gradient(135deg,
color-mix(in srgb, var(--warm-red) 60%, var(--paper-edge)),
color-mix(in srgb, var(--warm-gold) 65%, var(--paper-edge))) border-box;
}
.landing__contact .landing__intro { max-width: 40rem; }
.landing__contact-note { max-width: 34rem; margin-left: auto; margin-right: auto; }
/* ---- 75.5 scroll reveals (classes managed by landing.js) ---- */
.scroll-reveal {
opacity: 0;
transform: translateY(8px);
}
.scroll-reveal--in {
opacity: 1;
transform: none;
transition: opacity 0.55s ease, transform 0.55s ease;
}
@media (prefers-reduced-motion: reduce) {
.scroll-reveal { opacity: 1; transform: none; }
}
/* =====================================================================
76. v2.5 — BULETINUL, ÎNGRIJIT
The members' side catches up with the landing: a book-page reading
experience, soft warm chrome instead of the last print borders, a
time-of-day greeting, empty states with the emblem, virtue pages
that breathe, and Cinzel served from our own folder so the brand
survives an offline USB presentation.
===================================================================== */
/* ---- 76.1 (Cinzel used to be self-hosted here; removed in v2.12 when
the site moved to a single font. It lives on in git history.) ---- */
/* ---- 76.2 the missing display-font token ----
Ten rules across the file ask for var(--font-display), but the token
was never defined, so headings silently fell back to the body font.
(It pointed at Cinzel until v2.12; now every font token is the body
font, section 81.) Article titles stay in the
body font on purpose: user-written titles can be long, and they
should match the feed's story titles. */
:root { --font-display: var(--font-mast); }
.reader__title { font-family: var(--font-body); }
/* ---- 76.3 the reading experience (article.html) ----
A well-set book page: comfortable size, generous leading, a gold
kicker, soft figures. */
.reader__body {
font-size: 1.08rem;
line-height: 1.75;
}
.reader__kicker {
color: var(--gold);
letter-spacing: 0.22em;
font-size: 0.74rem;
}
.reader__byline { border-bottom-color: var(--paper-edge); }
.reader__hero,
.story__art-img {
border: none;
border-radius: 12px;
}
.reader__hero { margin: 0.2rem 0 1.4rem; }
.reader__archive-banner {
background: var(--paper-tint);
border: 1px solid color-mix(in srgb, var(--warm-gold) 45%, var(--paper-edge));
border-radius: 10px;
color: var(--ink-soft);
}
.reader__archive-banner a { color: var(--warm-gold); }
.reader__actions { border-top-color: var(--paper-edge); }
/* The quiet chrome above the reader and the archive: the way back. */
.reader-return {
max-width: 720px;
margin: 1.5rem auto 0;
padding: 0 1.25rem;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
font-family: var(--font-label);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.reader-return a {
color: var(--ink-soft);
text-decoration: none;
transition: color 0.2s ease;
}
.reader-return a:hover,
.reader-return a:focus-visible { color: var(--gold); }
.reader-return__status { color: var(--gold-soft); }
/* ---- 76.4 masthead meta line (news.html) ----
The old boxed rule strips are gone from the markup; this is their
dignified successor — one quiet line under the title, with the date. */
.masthead__meta {
margin: 0.8rem 0 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.7rem;
font-family: var(--font-label);
font-size: 0.66rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-soft);
}
.masthead__meta-sep { color: var(--gold-soft); }
/* ---- 76.5 the greeting — the bulletin knows who walked in ---- */
.feed-greeting {
max-width: var(--max-width);
margin: 1.6rem auto -0.6rem;
padding: 0 1.25rem;
color: var(--ink-soft);
font-size: 1.02rem;
font-style: italic;
}
/* ---- 76.6 feed chrome: the last print borders retire ---- */
.story { border-top: 1px solid var(--paper-edge); }
.story--lead,
.story--feature {
border-top: none;
position: relative;
padding-top: 1.15rem;
}
.story--lead::before,
.story--feature::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--warm-red) 60%, transparent),
color-mix(in srgb, var(--warm-gold) 60%, transparent),
transparent);
}
/* Justified newspaper columns read badly on dark screens — set left. */
.story__body p { text-align: left; }
/* Kickers join the landing's warm gold voice. */
.story__kicker,
.folder__kicker { color: var(--warm-gold); }
.sidebar {
border-color: var(--paper-edge);
border-radius: 12px;
}
/* The artwork placeholder becomes the same velvet cushion as the
landing's photo slots. */
.story__art {
border: none;
border-radius: 12px;
position: relative;
background:
linear-gradient(150deg,
color-mix(in srgb, var(--warm-red) 20%, var(--paper-tint)),
color-mix(in srgb, var(--warm-gold) 15%, var(--paper-tint)));
}
.story__art::before {
content: "";
position: absolute;
inset: 0;
background: url("emblem.svg") center 42% / min(60%, 300px) no-repeat;
opacity: 0.09;
pointer-events: none;
}
.story__art span {
position: absolute;
left: 1rem; right: 1rem; bottom: 1.1rem;
text-align: center;
text-transform: uppercase;
font-size: 0.66rem;
letter-spacing: 0.3em;
color: color-mix(in srgb, var(--warm-gold) 75%, var(--ink));
opacity: 0.62;
}
/* ---- 76.7 events strip: warm hairline, soft date tiles ---- */
.events {
border-top: none;
border-bottom: none;
position: relative;
padding-top: 1.9rem;
}
.events::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: min(600px, 84%);
height: 1px;
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, var(--warm-red) 55%, transparent),
color-mix(in srgb, var(--warm-gold) 62%, transparent),
transparent);
}
.event__date {
border: 1px solid var(--paper-edge);
border-radius: 8px;
background: var(--paper-tint);
}
/* ---- 76.8 empty states with warmth ----
Page-level empties get the emblem treatment; small inline empties
get a quiet tinted card. Never a bare line of text in the dark. */
.feed-empty,
.cabinet__empty {
position: relative;
overflow: hidden;
border: 1px solid var(--paper-edge);
border-radius: 16px;
padding: 3.4rem 1.5rem;
background:
linear-gradient(150deg,
color-mix(in srgb, var(--warm-red) 10%, var(--paper-tint)),
color-mix(in srgb, var(--warm-gold) 8%, var(--paper-tint)));
}
.feed-empty::before,
.cabinet__empty::before {
content: "";
position: absolute;
inset: 0;
background: url("emblem.svg") center 30% / min(52%, 340px) no-repeat;
opacity: 0.08;
pointer-events: none;
}
.events__empty,
.admin__empty {
background: var(--paper-tint);
border: 1px solid var(--paper-edge);
border-radius: 12px;
padding: 1rem 1.25rem;
color: var(--ink-soft);
font-style: italic;
}
/* ---- 76.9 virtue pages: presence ----
The roman numeral as a huge quiet watermark in the panel's corner
(virtue.js sets --vg-numeral), and a slow breathing glow on the
panel's edge. These are the site's most sacred pages — let them
feel alive, gently. */
.virtue-page__panel {
position: relative;
overflow: hidden;
}
.virtue-page__panel::after {
content: var(--vg-numeral, "");
position: absolute;
right: 0.02em;
bottom: -0.24em;
font-family: var(--font-mast);
font-weight: 700;
font-size: 11rem;
line-height: 1;
color: var(--vg, var(--gold));
opacity: 0.06;
pointer-events: none;
user-select: none;
}
@keyframes virtue-breathe {
0%, 100% { box-shadow: 0 0 70px -22px color-mix(in srgb, var(--vg, var(--gold)) 55%, transparent); }
50% { box-shadow: 0 0 95px -16px color-mix(in srgb, var(--vg, var(--gold)) 75%, transparent); }
}
.virtue-page__panel { animation: virtue-breathe 8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.virtue-page__panel { animation: none; }
}
/* =====================================================================
77. v2.6 — VERIFICARE ȘI ÎNTĂRIRE II
Hardening release: no new features. The only visual addition is the
access-code line in the master's dialog, which used to cram the code
into the body text where the newlines collapsed.
===================================================================== */
/* The one-time access code, on its own big monospace line. */
.modal__code {
font-family: Consolas, 'Courier New', monospace;
font-size: 1.35rem;
letter-spacing: 0.12em;
text-align: center;
color: var(--warm-gold);
background: rgba(0, 0, 0, 0.35);
border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--paper-edge));
border-radius: 10px;
padding: 0.8rem 1rem;
margin: 0 0 1rem;
user-select: all; /* one click selects the whole code */
}
/* =====================================================================
78. v2.7 — BUTOANE ȘI TEMELIE
The foundation pass: no new features, only the surfaces the buttons
stand on. The last print-era hairlines (bright --ink borders on the
inputs, the editor, article images, the sidebar label, the admin
heading, ghost buttons) soften to the dark palette and take a radius
from the 8/12/16/18 scale; the hard offset shadows on the landing
become warm glows; the two admin rules that were invisible on dark
get their light back; the JS-rendered tables scroll inside their own
box so a phone never drags the page sideways; and the raw hexes left
in sections 43 and 73 finally get names. Appended last, so it wins
over the older rules on purpose.
===================================================================== */
/* ---- 78.1 tokens: the last raw hexes get a name ----
These colors were typed as hex in sections 43 and 73. Naming them
means one place to change them later; the rules underneath are
re-declared here so the tokens are what actually applies. */
:root {
--on-gold: #14110c; /* text sitting on a gold fill */
--toolbar-bg: #2b3450; /* editor toolbar button face */
--toolbar-edge: #46527a; /* its border, and the toolbar dividers */
--mark-bg: #ffe98c; /* highlighted text */
--mark-ink: #1f1a14; /* ...and the ink on it */
--danger: #e05b5b; /* destructive actions, bright on dark */
}
/* Section 43, re-declared through the tokens. */
::selection { color: var(--on-gold); }
.btn--primary { color: var(--on-gold); }
/* Sections 73.5 and 73.6, re-declared through the tokens. */
.virtue-page__nav .btn--primary { color: var(--on-gold); }
.editor__toolbar button {
background: var(--toolbar-bg);
border-color: var(--toolbar-edge);
}
.editor__toolbar button:hover,
.editor__toolbar button:focus-visible { color: var(--on-gold); }
.editor__sep { background: var(--toolbar-edge); }
/* Every highlight on the site now comes from one pair of tokens. */
.editor__toolbar mark,
.editor__toolbar button mark,
.editor__body mark,
.story__body mark,
.reader__body mark {
background: var(--mark-bg);
color: var(--mark-ink);
}
/* ---- 78.2 one masthead for every inner page ----
Two title variants were in play (.masthead__title--roman on login,
admin, profile, questions, support and 404; plain everywhere else)
and the cascade quietly flattened both to the same small size, so
the --roman intent never actually showed. One rule settles it: the
size and tracking that variant always meant, for all of them. */
.masthead--small .masthead__title {
font-family: var(--font-label); /* the site's one font */
font-weight: 700;
/* Sized to sit UNDER the bulletin's own masthead (news.html), not
above it: the inner pages carry the wordmark, they don't shout it. */
font-size: clamp(2.1rem, 5vw, 3.2rem);
letter-spacing: 0.05em;
}
/* ---- 78.3 the last print hairlines retire ----
Every border below computed to the bright --ink (#f2f2ef): the white
frame of the old newspaper. On a dark page that reads as a cut line,
not an edge. They move to the palette's own border colors and pick a
radius from the scale. The gold keyboard focus ring (section 61)
stays exactly as it is. */
/* Text fields and selects. */
.form input[type=text],
.form input[type=password],
.form input[list],
.form select {
border-color: var(--paper-edge);
border-radius: 8px;
}
/* The mouse-focus ring on these was red while the keyboard ring is
gold; one gold ring for both is the honest answer. */
.form input:focus,
.form select:focus,
.editor__body:focus { outline-color: var(--gold); }
/* Buttons: soft edge, small-control radius, a warm hover on ghosts. */
.btn { border-radius: 8px; }
/* Links styled as buttons inherit the page line-height, so they sat a
couple of pixels taller than the real