/* ST Brochure Library Front-end styles: the cover grid, the magazine viewer and the request form. Everything is namespaced under .stbl- so it cannot collide with a theme. */ /* Tokens live on every root the plugin creates. .stbl-root wraps everything the shortcode prints -- filter chips and pager included, both of which sit beside the grid rather than inside it -- while the viewer and the request modal are appended to . Scoping the custom properties to the grid alone left the chips borderless and the current one white-on-white. */ .stbl-root, .stbl-library, .stbl-viewer, .stbl-modal { /* Swedish Technology brand: near-black ground, red accent. */ --stbl-navy: #0f0d1d; --stbl-accent: #e22222; --stbl-accent-hover: #c11a1a; --stbl-gold: #c9a227; --stbl-ink: #16151f; --stbl-soft: #4f5560; --stbl-faint: #7d838f; --stbl-edge: #e0e0e6; --stbl-surface: #ffffff; --stbl-ground: #f4f4f7; } .stbl-library { display: grid; gap: clamp(18px, 2.6vw, 30px); grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); margin: 0 0 2rem; } @media (min-width: 900px) { .stbl-library[data-columns="2"] { grid-template-columns: repeat(2, 1fr); } .stbl-library[data-columns="3"] { grid-template-columns: repeat(3, 1fr); } .stbl-library[data-columns="4"] { grid-template-columns: repeat(4, 1fr); } .stbl-library[data-columns="5"] { grid-template-columns: repeat(5, 1fr); } } .stbl-card { background: var(--stbl-surface); border: 1px solid var(--stbl-edge); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; } .stbl-card:hover, .stbl-card:focus-within { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(10, 37, 64, .14); } .stbl-card-open { all: unset; cursor: pointer; display: block; } .stbl-card-cover { position: relative; display: block; aspect-ratio: 1240 / 1754; overflow: hidden; background: var(--stbl-ground); } .stbl-card-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .35s ease; } .stbl-card:hover .stbl-card-cover img { transform: scale(1.03); } /* The spine hints that this opens like a magazine, not a file. */ .stbl-card-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 12px; background: linear-gradient(90deg, rgba(10, 37, 64, .28), rgba(10, 37, 64, 0)); z-index: 2; } .stbl-card-flip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) translateY(8px); opacity: 0; background: var(--stbl-accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; border-radius: 100px; transition: opacity .2s ease, transform .2s ease; z-index: 3; } .stbl-card:hover .stbl-card-flip, .stbl-card:focus-within .stbl-card-flip { opacity: 1; transform: translateX(-50%) translateY(0); } .stbl-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .stbl-card-cat { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stbl-accent); } .stbl-card-title { margin: 0; font-size: 1.05rem; line-height: 1.28; color: var(--stbl-ink); } .stbl-card-sub { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--stbl-soft); } .stbl-card-meta { margin: 2px 0 0; font-size: .78rem; color: var(--stbl-faint); } .stbl-card-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; } .stbl-btn { font: inherit; font-size: .85rem; font-weight: 600; line-height: 1; padding: 10px 15px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .stbl-card-actions .stbl-btn { flex: 0 1 auto; min-width: 0; padding: 8px 10px; font-size: .76rem; white-space: nowrap; } .stbl-btn:focus-visible { outline: 2px solid var(--stbl-accent); outline-offset: 2px; } .stbl-btn-primary { background: var(--stbl-accent); color: #fff; } .stbl-btn-primary:hover { background: var(--stbl-accent-hover); } .stbl-btn-ghost { background: transparent; color: var(--stbl-soft); border-color: var(--stbl-edge); } .stbl-btn-ghost:hover { color: var(--stbl-ink); border-color: var(--stbl-faint); } .stbl-empty { color: #7e8f9c; font-style: italic; } /* ---------- blog-style resource filter panel ---------- */ .stbl-filter-panel { margin: 0 0 2.2rem; padding: 28px; border-radius: 22px; background: linear-gradient(135deg, #11152d, #29204b); color: #fff; } .stbl-filter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .stbl-filter-kicker { display: block; margin-bottom: 12px; color: #f2b21b; font-size: .72rem; font-weight: 800; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; } .stbl-filter-head h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.45rem); font-weight: 800; line-height: 1.12; } .stbl-filter-head p { max-width: 700px; margin: 0; color: rgba(255, 255, 255, .78); font-size: .96rem; line-height: 1.55; } .stbl-filter-count { flex: 0 0 auto; padding-bottom: 4px; color: rgba(255, 255, 255, .78); font-size: .92rem; font-weight: 700; white-space: nowrap; } .stbl-filter-panel .stbl-selects { display: grid; grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(145px, 1fr)) auto; align-items: end; gap: 12px; margin: 0; } .stbl-filter-panel .stbl-select { min-width: 0; flex: none; } .stbl-filter-panel .stbl-select-label { color: rgba(255, 255, 255, .78); } .stbl-filter-panel .stbl-select input, .stbl-filter-panel .stbl-select select { min-height: 49px; box-sizing: border-box; border: 0; border-radius: 12px; background-color: #fff; color: #20233d; font-size: .88rem; } .stbl-filter-panel .stbl-select input { padding: 12px 14px; } .stbl-filter-panel .stbl-select select { padding-block: 12px; } .stbl-filter-panel .stbl-select-go { min-height: 49px; padding: 12px 20px; border: 1px solid #f2b21b; border-radius: 12px; background: #f2b21b; color: #16151f; font-size: .86rem; font-weight: 800; white-space: nowrap; } .stbl-filter-panel .stbl-select-go:hover { background: #ffc33e; opacity: 1; } .stbl-filter-panel .stbl-select-actions { display: flex; align-items: center; gap: 12px; } .stbl-filter-panel .stbl-select-clear { color: rgba(255, 255, 255, .9); } .stbl-js .stbl-filter-panel .stbl-select-go { display: block !important; } [dir="rtl"] .stbl-filter-head { text-align: right; } [dir="rtl"] .stbl-filter-count { text-align: left; } @media (max-width: 1050px) { .stbl-filter-panel .stbl-selects { grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(150px, 1fr)); } .stbl-filter-panel .stbl-select-actions { grid-column: auto; } } @media (max-width: 620px) { .stbl-filter-panel { padding: 22px 18px; border-radius: 18px; } .stbl-filter-head { display: block; margin-bottom: 20px; } .stbl-filter-count { margin-top: 14px; } .stbl-filter-panel .stbl-selects { grid-template-columns: 1fr; gap: 10px; } .stbl-filter-panel .stbl-select-actions { grid-column: auto; justify-self: start; } } /* ---------- select facets ---------- */ .stbl-selects { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 1.2rem; } /* Four controls plus two actions have to sit on one or two rows, not four: a filter bar taller than the first card row pushes the library off screen. */ .stbl-select { display: flex; flex-direction: column; gap: 4px; flex: 1 1 170px; min-width: 150px; } .stbl-select-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stbl-faint); } .stbl-select select { appearance: none; width: 100%; padding: 9px 34px 9px 12px; border: 1px solid var(--stbl-edge); border-radius: 6px; background: var(--stbl-surface) no-repeat right 11px center; /* caret drawn inline so no image request is needed */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d838f'/%3E%3C/svg%3E"); color: var(--stbl-ink); font: inherit; font-size: .9rem; line-height: 1.2; cursor: pointer; } .stbl-select select:focus-visible { outline: 2px solid var(--stbl-accent); outline-offset: 1px; } [dir="rtl"] .stbl-select select { padding: 9px 12px 9px 34px; background-position: left 11px center; } /* Search sits in the same row as the selects and takes the slack. */ .stbl-select-q { flex: 2 1 220px; min-width: 180px; } .stbl-select-q input { width: 100%; padding: 9px 12px; border: 1px solid var(--stbl-edge); border-radius: 6px; background: var(--stbl-surface); color: var(--stbl-ink); font: inherit; font-size: .9rem; } .stbl-select-q input:focus-visible { outline: 2px solid var(--stbl-accent); outline-offset: 1px; } .stbl-select-go { padding: 10px 18px; border: 1px solid var(--stbl-navy); border-radius: 6px; background: var(--stbl-navy); color: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; } .stbl-select-go:hover { opacity: .9; } /* With JS the selects submit themselves, so the button is redundant. */ .stbl-js .stbl-select-go { display: none; } .stbl-select-clear { align-self: center; color: var(--stbl-soft); font-size: .84rem; text-decoration: underline; } @media (max-width: 560px) { .stbl-selects { gap: 10px; } .stbl-select { min-width: 0; flex: 1 1 46%; } } /* Arabic edition marker on a card */ .stbl-ar { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 0; padding: 2px 7px; border: 1px solid var(--stbl-edge); border-radius: 4px; color: var(--stbl-soft); font-size: .72rem; text-decoration: none; } .stbl-card-actions .stbl-ar { padding: 8px 7px; font-size: .7rem; } .stbl-ar:hover { border-color: var(--stbl-accent); color: var(--stbl-accent); } @media (max-width: 560px) { .stbl-card-actions { gap: 4px; } .stbl-card-actions .stbl-btn { padding-inline: 6px; font-size: .68rem; } .stbl-card-actions .stbl-ar { padding-inline: 5px; } } /* ---------- category filter ---------- */ .stbl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.75rem; } .stbl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--stbl-edge); border-radius: 999px; background: var(--stbl-surface); color: var(--stbl-soft); font-size: .86rem; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; } .stbl-chip:hover { color: var(--stbl-ink); border-color: var(--stbl-faint); } .stbl-chip:focus-visible { outline: 2px solid var(--stbl-accent); outline-offset: 2px; } .stbl-chip.is-current { background: var(--stbl-navy); border-color: var(--stbl-navy); color: #fff; font-weight: 600; } .stbl-chip-n { font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--stbl-faint); } .stbl-chip.is-current .stbl-chip-n { color: rgba(255, 255, 255, .65); } @media (max-width: 560px) { /* One swipeable row beats four stacked rows of chips on a phone. */ .stbl-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; } .stbl-filter::-webkit-scrollbar { display: none; } } /* ---------- pager ---------- */ .stbl-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2rem; font-size: .9rem; } .stbl-pager-num, .stbl-pager-step { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--stbl-edge); border-radius: 6px; color: var(--stbl-soft); text-decoration: none; background: var(--stbl-surface); transition: color .15s, border-color .15s, background .15s; } .stbl-pager-num:hover, .stbl-pager-step:hover { color: var(--stbl-ink); border-color: var(--stbl-faint); } .stbl-pager-num:focus-visible, .stbl-pager-step:focus-visible { outline: 2px solid var(--stbl-accent); outline-offset: 2px; } .stbl-pager-num.is-current { background: var(--stbl-accent); border-color: var(--stbl-accent); color: #fff; font-weight: 700; } .stbl-pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 38px; color: var(--stbl-faint); } .stbl-pager-count { margin-inline-start: auto; color: var(--stbl-faint); font-size: .82rem; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .stbl-pager-count { margin-inline-start: 0; width: 100%; } } /* ---------- viewer ---------- */ .stbl-viewer { position: fixed; inset: 0; z-index: 99999; background: #071320; display: flex; flex-direction: column; color: #e8eff4; } .stbl-viewer[hidden] { display: none !important; } .stbl-v-bar { display: flex; align-items: center; gap: 14px; padding: 10px clamp(12px, 2vw, 22px); background: rgba(7, 19, 32, .96); border-bottom: 1px solid #1d3348; flex: none; } .stbl-v-title { margin: 0; font-size: clamp(14px, 2vw, 17px); font-weight: 700; line-height: 1.2; } .stbl-v-sub { margin: 2px 0 0; font-size: 12px; color: #93a8b8; line-height: 1.3; } .stbl-v-spacer { margin-left: auto; } /* The viewer's request button is the page's one real call to action, so it carries the brand gold rather than the red used for secondary actions. Dark text keeps it legible on gold. */ .stbl-v-bar .stbl-btn-primary { background: var(--stbl-gold, #c9a227); color: #16151f; } .stbl-v-bar .stbl-btn-primary:hover { background: #b08e1f; color: #0f0d1d; } .stbl-v-bar .stbl-btn-primary:focus-visible { outline: 2px solid var(--stbl-gold, #c9a227); outline-offset: 2px; } .stbl-icon { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #cfe0ec; border: 1px solid #23394f; } .stbl-icon:hover { background: #12293c; color: #fff; } .stbl-icon:focus-visible { outline: 2px solid var(--stbl-accent, #17b4b0); outline-offset: 2px; } .stbl-icon svg { width: 18px; height: 18px; } .stbl-v-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2vw, 26px); overflow: hidden; } .stbl-book { position: relative; display: flex; gap: 0; max-width: 100%; max-height: 100%; transition: transform .25s ease; transform-origin: center center; } .stbl-leaf { position: relative; background: #fff; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); overflow: hidden; flex: none; } .stbl-leaf img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; } /* The gutter shadow is what reads as a bound spread rather than two images. */ .stbl-leaf-left::after, .stbl-leaf-right::after { content: ""; position: absolute; top: 0; bottom: 0; width: 26px; pointer-events: none; } .stbl-leaf-left::after { right: 0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.20)); } .stbl-leaf-right::after { left: 0; background: linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,.20)); } .stbl-book.is-turning .stbl-leaf-right, .stbl-book.is-turning-back .stbl-leaf-left { animation: stbl-turn .42s ease; } @keyframes stbl-turn { from { transform: perspective(1600px) rotateY(0deg); } to { transform: perspective(1600px) rotateY(-14deg); } } .stbl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 74px; border-radius: 6px; background: rgba(9, 24, 38, .8); border: 1px solid #23394f; color: #dbe8f1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5; } .stbl-nav:hover { background: #12293c; } .stbl-nav:disabled { opacity: .3; cursor: default; } .stbl-nav:focus-visible { outline: 2px solid var(--stbl-accent); outline-offset: 2px; } .stbl-nav-prev { left: 8px; } .stbl-nav-next { right: 8px; } .stbl-nav svg { width: 20px; height: 20px; } .stbl-v-foot { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px clamp(12px, 2vw, 22px); background: rgba(7, 19, 32, .96); border-top: 1px solid #1d3348; } .stbl-counter { font-size: 12px; color: #93a8b8; font-variant-numeric: tabular-nums; white-space: nowrap; } .stbl-thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; flex: 1; scrollbar-width: thin; } .stbl-thumb { all: unset; cursor: pointer; flex: none; width: 34px; aspect-ratio: 1240 / 1754; border: 1px solid #23394f; border-radius: 2px; overflow: hidden; background: #0d2032; } .stbl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .stbl-thumb[aria-current="true"] { border-color: var(--stbl-accent); box-shadow: 0 0 0 1px var(--stbl-accent); } .stbl-thumb:focus-visible { outline: 2px solid var(--stbl-accent); outline-offset: 1px; } /* ---------- request form ---------- */ .stbl-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(6, 16, 27, .72); display: flex; align-items: center; justify-content: center; padding: 18px; } .stbl-modal[hidden] { display: none !important; } .stbl-form { background: #fff; color: #16222e; border-radius: 10px; width: min(440px, 100%); padding: clamp(20px, 3vw, 28px); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); max-height: 90vh; overflow-y: auto; } .stbl-form h3 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.25; } .stbl-form .stbl-form-sub { margin: 0 0 16px; font-size: .87rem; color: #5c6e7d; line-height: 1.5; } .stbl-field { display: block; margin-bottom: 12px; } .stbl-field span { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 5px; color: #4a5c6b; } .stbl-field input[type="text"], .stbl-field input[type="email"] { width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem; padding: 10px 12px; border: 1px solid #cfd9e2; border-radius: 5px; background: #fff; color: #16222e; } .stbl-field input:focus { outline: 2px solid var(--stbl-accent); outline-offset: 0; border-color: var(--stbl-accent); } .stbl-consent { display: flex; gap: 9px; align-items: flex-start; font-size: .84rem; color: #4a5c6b; margin: 4px 0 16px; line-height: 1.45; } .stbl-consent input { margin-top: 2px; } .stbl-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .stbl-form-actions { display: flex; gap: 10px; align-items: center; } .stbl-note { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; } .stbl-note.is-error { color: #b3261e; } .stbl-note.is-ok { color: #157a3a; } @media (prefers-reduced-motion: reduce) { .stbl-card, .stbl-card-cover img, .stbl-card-flip, .stbl-book, .stbl-leaf { transition: none !important; } .stbl-book.is-turning .stbl-leaf-right, .stbl-book.is-turning-back .stbl-leaf-left { animation: none !important; } }