@charset "UTF-8"; /* ============================================================ M-aple ブランドリスキン — brand.css（子テーマ・集約版） コンセプト「羊皮紙の工房（アトリエ）」/ frame基調 ＋ warmアクセント 出典: Obsidian Blueprint/06_ブランドデザイン.md ＋ assets/brand-tokens.css ■ 読み込み functions.php から 末尾（wp_head priority 100）で読み込む。 よって賢威の base.css / advanced.css / default-style.css / カラー カスタマイザーのインラインCSS いずれよりも後に効く（!important不要）。 ■ 賢威の既定 → ブランド 対応 #f0f0f0 サイト地 → 羊皮紙 --parchment #fff 面・カード → 紙 --paper #505050 本文 → 墨 --ink #0329ce リンク → 藍 --indigo #05a5ab/#00858a 青緑 → 藍/金 --indigo / --gold #e8f7f7/#def2f3 淡青緑 → 紙/羊皮紙の淡色 魔法・原作固有のモチーフ/用語は使わない（ブランド指針の除外事項）。 ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700;800&family=Zen+Maru+Gothic:wght@500;700&family=Cinzel:wght@600;700&family=Courier+Prime:wght@400;700&family=Pirata+One&display=swap'); /* ------------------------------------------------------------ 0. ブランドトークン ------------------------------------------------------------ */ :root { --parchment: #efe5cb; --paper: #f8f2e2; --paper-tint: #f3ecd8; /* 淡い面（淡青緑#e8f7f7の置換） */ --ink: #3e3322; --ink-soft: #6f5f45; --ink-faint: rgba(62,51,34,.10); --indigo: #2d3a63; --indigo-deep: #1d2746; --gold: #a9852f; --gold-bright: #c9a73f; --gold-ink: #8a6a23; /* 明るい紙/羊皮紙の上に載せる金「文字」用（可読コントラスト確保） */ --dawn: #c98a4e; --moss: #5c6b46; --rule: rgba(62,51,34,.42); --rule-strong: rgba(62,51,34,.62); --rule-fine: rgba(169,133,47,.45); --rule-dash: rgba(111,95,69,.30); --font-serif: 'Shippori Mincho', 'Yu Mincho', 'YuMincho', serif; --font-round: 'Zen Maru Gothic', 'Shippori Mincho', sans-serif; --font-latin: 'Cinzel', 'Shippori Mincho', serif; --font-mono: 'Courier Prime', 'SFMono-Regular', monospace; --font-head: var(--font-serif); --shadow-card: 5px 6px 0 rgba(62,51,34,.16); --ornament: "\2726"; } /* ------------------------------------------------------------ 1. 地と本文 ------------------------------------------------------------ */ body { background-color: var(--parchment); background-image: radial-gradient(ellipse at 50% 0%, rgba(255,250,235,.85), transparent 60%), radial-gradient(ellipse at 50% 120%, rgba(120,95,50,.16), transparent 55%); background-attachment: fixed; color: var(--ink); font-family: var(--font-serif); line-height: 1.85; -webkit-font-feature-settings: 'palt'; font-feature-settings: 'palt'; } /* 白い面 → 紙 */ .keni-section_wrap, .keni-section_outer, .archive_title { background-color: var(--paper); } .keni-main, .keni-sub { background: transparent; } q { background: var(--paper-tint); } /* ------------------------------------------------------------ 2. リンク（青/青緑 → 藍、hoverで金） ------------------------------------------------------------ */ a { color: var(--indigo); transition: color .15s ease; } a:hover, a:active, a:focus { color: var(--gold); } /* ------------------------------------------------------------ 3. ヘッダー・ロゴ ------------------------------------------------------------ */ .keni-header_wrap { background-image: none; /* 青緑ストライプを除去 */ background-color: var(--paper); border-bottom: 2px solid var(--gold); box-shadow: 0 1px 0 var(--rule-fine); } .keni-header_cont .header-mail { background: var(--parchment); } .keni-header_cont .header-mail .btn_header { color: var(--indigo); } .site-title { font-family: var(--font-serif); font-weight: 800; letter-spacing: 1px; } .site-title > a { color: var(--indigo-deep); } /* ロゴ本体＝最濃の藍で強コントラスト */ .site-title > a:hover { color: var(--indigo); } .site-title > a span { color: var(--gold-ink); } /* アクセント＝濃い金（紙地で可読） */ /* ------------------------------------------------------------ 4. グローバルナビ（藍地 × 紙文字 × 金hover） ------------------------------------------------------------ */ .keni-gnav_wrap, .keni-gnav_cont { background-color: var(--indigo-deep); } .keni-gnav_cont ul { border-top-color: rgba(201,167,63,.22); } .keni-gnav_inner li { border-bottom-color: rgba(201,167,63,.18); } .keni-gnav_inner li a { color: #efe7d0; font-family: var(--font-serif); letter-spacing: .5px; /* 賢威デスクトップの白い下線(border-bottom:3px solid #fff)を背景と同色にして馴染ませる */ border-bottom-color: var(--indigo-deep); } .keni-gnav_inner li a:hover, .keni-gnav_inner li a:active, .keni-gnav_inner li a:focus, .keni-gnav_inner li.current-menu-item > a, .keni-gnav_inner li.current_page_item > a { color: var(--gold-bright); background-color: rgba(255,255,255,.04); border-bottom-color: var(--gold-bright); /* ホバー/現在ページのみ金の下線 */ } .keni-gnav_inner li li { background-color: var(--indigo); } .keni-gnav_btn { background: var(--indigo-deep); color: #efe7d0; } .keni-gnav_btn_icon-open, .keni-gnav_btn_icon-open::before, .keni-gnav_btn_icon-open::after { background-color: #efe7d0; } /* ------------------------------------------------------------ 5. 見出し（青緑 → 藍金・明朝） ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); letter-spacing: .5px; } .keni-section h1 { background-image: none; /* 青緑ストライプを除去 */ background-color: var(--paper); border-left: 5px solid var(--indigo); border-bottom: 2px solid var(--gold); color: var(--ink); /* 賢威の既定は padding-bottom:0（上端ストライプ前提）。 下線を border-bottom に変えたので下に余白を足し、文字と下線の密着を解消。 */ padding: 18px 16px 16px; font-size: 3.0rem; /* 20px → 30px（ブランドの中見出し相当） */ line-height: 1.5; } .keni-section h1:first-child { padding-top: 18px; } .archive_title { background-image: none; border-left: 5px solid var(--indigo); } h2 { background: var(--indigo); color: #f5efdd; border: 1px solid var(--gold); border-radius: 3px; } h3 { border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); color: var(--indigo); } h4 { border-bottom: 1px dotted var(--gold); color: var(--indigo); } h5 { color: var(--indigo); } h6 { color: var(--ink); } .keni-section h1 a, .keni-section h3 a, .keni-section h4 a, .keni-section h5 a, .keni-section h6 a { color: var(--ink); } .keni-section h1 a:hover, .keni-section h1 a:active, .keni-section h1 a:focus, .keni-section h3 a:hover, .keni-section h3 a:active, .keni-section h3 a:focus, .keni-section h4 a:hover, .keni-section h4 a:active, .keni-section h4 a:focus, .keni-section h5 a:hover, .keni-section h5 a:active, .keni-section h5 a:focus, .keni-section h6 a:hover, .keni-section h6 a:active, .keni-section h6 a:focus { color: var(--gold); } /* サブ見出し（#333 → 藍） */ .keni-section .sub-section_title { background: var(--indigo); } /* ------------------------------------------------------------ 6. ボタン（灰/青緑 → 藍地＋金縁） ------------------------------------------------------------ */ .btn { background: var(--indigo); color: #f5efdd; border: 1.5px solid var(--gold); border-radius: 3px; box-shadow: 2px 2px 0 rgba(62,51,34,.25); font-family: var(--font-head); font-weight: 700; letter-spacing: 1px; } .btn:hover, .btn:active, .btn:focus { background: var(--indigo-deep); color: var(--gold-bright); } .btn_gray { background: var(--ink-soft); border-color: var(--rule); color: #f5efdd; } .btn_bluegreen { background: var(--moss); border-color: var(--gold); color: #f5efdd; } .btn_style01 { color: var(--indigo); } .btn_style02 { background-color: var(--paper-tint); color: var(--indigo); } .btn_style03 { background: var(--indigo); } /* 「続きを読む」は賢威が .ently_read-more .btn に background-color:#f7f7f7 を 当てている（base.css:1658）。同詳細度で背景・ホバーも明示して上書きする。 */ .ently_read-more .btn { background: var(--indigo); border-color: var(--gold); color: #f5efdd; } .ently_read-more .btn:hover, .ently_read-more .btn:active, .ently_read-more .btn:focus { background: var(--indigo-deep); color: var(--gold-bright); } /* ------------------------------------------------------------ 7. 記事一覧カード（白箱 → 紙片：金細罫＋版ずれ影） ------------------------------------------------------------ */ .entry-list > .entry-list_item { position: relative; background-color: var(--paper); border: 1.5px solid var(--rule); border-radius: 3px; box-shadow: var(--shadow-card); } .entry-list > .entry-list_item::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule-fine); border-radius: 2px; pointer-events: none; z-index: 0; } .entry-list > .entry-list_item > .entry { position: relative; z-index: 1; } .entry-list .entry_title a { color: var(--ink); font-family: var(--font-head); } .entry-list .entry_title a:hover, .entry-list .entry_title a:active, .entry-list .entry_title a:focus { color: var(--indigo); } /* ------------------------------------------------------------ 8. 賢威コンポーネントの青緑 → ブランド色マッピング （default-style.css の #05a5ab/#00858a/淡青緑 を一括で寄せる） ------------------------------------------------------------ */ /* テーマ基本色クラス */ .color01 { color: var(--gold-ink); } /* 紙地に載る金文字＝濃い金で可読化 */ .color02 { color: var(--indigo); } .color03 { color: var(--gold-ink); } .color04, .color05, .color06 { color: var(--moss); } /* 目次・リスト・定義リスト・アコーディオン */ .toc-area_inner .toc-area_list > li::before, .list_style02 li::before { background: var(--gold); } .toc_title { color: var(--indigo); } .dl_style02 dt, .accordion-list dt { background: var(--indigo); color: #f5efdd; } .dl_style02 dd { background: var(--paper-tint); } /* ステップチャート（淡→濃を金系グラデに） */ .step-chart li:nth-child(2){ background-color: #efe0bc; } .step-chart li:nth-child(3){ background-color: var(--gold-bright); } .step-chart li:nth-child(4){ background-color: var(--indigo); color:#f5efdd; } .step-chart_style01 li:nth-child(2)::after, .step-chart_style02 li:nth-child(2)::after{ border-top-color: #efe0bc; } .step-chart_style01 li:nth-child(3)::after, .step-chart_style02 li:nth-child(3)::after{ border-top-color: var(--gold-bright); } .step-chart_style01 li:nth-child(4)::after, .step-chart_style02 li:nth-child(4)::after{ border-top-color: var(--indigo); } /* ボックス各種・プロフィール・レビュー・声 */ .profile-box, .review_desc, .box_style01 .box_inner, .box_style03, .box_style06, .voice_styl02, .contact-box_inner, .item-box02 .item-box_inner { background-color: var(--paper-tint); } .item-box .item-box_title, .item-box_title, .ranking-list .review_desc_title, .cast-box .cast_name, .cast-box_sub .cast_name, .voice-box .voice_title, .commentary-box .commentary-box_title, .contact-box_tel, .toc_title, .form-mailmaga .form-mailmaga_title, .form-login .form-login_title, .form-login-item .form-login_title { color: var(--indigo); } .item-box02 .item-box_title, .item-box03 .item-box_title { background-color: var(--indigo); color:#f5efdd; } .advance-billing-box_next-title { color: var(--gold-bright); } /* 見出しに使われる青緑ストライプ群 → 紙地＋藍金 */ .item-box02, .contact-box, .widget .cast-box_sub .cast-box_sub_title { background-image: none; background-color: var(--paper); border: 1px solid var(--gold); } .contact-box .contact-box-title { background-color: var(--indigo); color:#f5efdd; } /* チャット吹き出し */ .chat_style02 .bubble { background-color: var(--indigo); } .chat_style02 .bubble .bubble_in { border-color: var(--indigo); } /* 間（インターバル）・ページャ */ .interval01 span, .interval02 span { background-color: var(--gold); } .page-nav .current, .page-nav li a:hover, .page-nav li a:active, .page-nav li a:focus { background: var(--indigo); } /* タグクラウド・関連記事・リンクカード等のhover青緑 */ .tagcloud a::before, .related-entry-list .related-entry_title a:hover, .related-entry-list .related-entry_title a:active, .related-entry-list .related-entry_title a:focus, .keni-link-card_title a:hover, .keni-link-card_title a:active, .keni-link-card_title a:focus, .keni-breadcrumb-list li a:hover, .keni-breadcrumb-list li a:active, .keni-breadcrumb-list li a:focus, .calendar tfoot td a:hover, .calendar tfoot td a:active, .calendar tfoot td a:focus { color: var(--gold); } /* ------------------------------------------------------------ 9. 区切り・表・引用 ------------------------------------------------------------ */ .keni-main hr { border: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 2em 0; } .keni-main th { background-color: var(--indigo); color: #f5efdd; border-color: var(--rule); } .keni-main td { border-color: var(--rule); } .keni-main blockquote { background: var(--parchment); border-left: 4px solid var(--gold); } /* 文字色・マーカー（賢威の装飾クラスをブランドへ。!importantで定義されているため合わせる） */ .blue { color: var(--indigo) !important; } .navy { color: var(--indigo-deep) !important; } .green { color: var(--moss) !important; } .brown { color: var(--ink) !important; } .orange { color: var(--dawn) !important; } .line-blue { background: linear-gradient(transparent 55%, rgba(45,58,99,.22) 55%) !important; } .line-yellow { background: linear-gradient(transparent 55%, rgba(201,167,63,.32) 55%) !important; } .line-orange { background: linear-gradient(transparent 55%, rgba(201,138,78,.30) 55%) !important; } /* ------------------------------------------------------------ 10. フッター・コピーライト ------------------------------------------------------------ */ .keni-footer_wrap { background: var(--parchment); /* 白 → 羊皮紙（本文エリアと統一） */ border-top: 2px solid var(--gold);/* 全幅の金の区切り（本文との境目） */ } /* フッターのモバイル固定パネルも羊皮紙寄りに */ .keni-footer-panel_wrap { background: var(--paper); } .keni-copyright_wrap { border-top-color: var(--rule-fine); color: var(--ink-soft); font-family: var(--font-latin); letter-spacing: 1px; } /* 検索ウィジェット：賢威は .search-box に margin-bottom:-20px を当てており （base.css:5016／元はウィジェット地が透明前提）、紙カード化で入力欄が カード下端に貼り付く。負マージンを戻してカードの下余白を確保する。 */ .widget_search .search-box { margin-bottom: 0; } /* ============================================================ 11. フリーエリア用の汎用ブランド部品 （トップ等の「フリーエリア」HTMLに class を付けて使う） ============================================================ */ /* warm アクセント：囲った範囲だけ丸ゴシック＋暁＋大きな角丸 */ .m-warm { --indigo: var(--dawn); --rule-fine: rgba(201,138,78,.40); font-family: var(--font-round); } .m-warm h1, .m-warm h2, .m-warm h3, .m-warm h4, .m-warm h5, .m-warm h6 { font-family: var(--font-round); } .m-warm h2 { background: var(--dawn); border-color: var(--gold-bright); } .m-warm h3, .m-warm h4, .m-warm h5 { color: var(--dawn); } .m-warm .btn { background: var(--dawn); border-color: var(--gold-bright); border-radius: 14px; box-shadow: 0 5px 0 rgba(92,107,70,.18); } .m-warm .entry-list > .entry-list_item { border-radius: 14px; box-shadow: 0 6px 0 rgba(92,107,70,.16); } /* バッジ */ .m-badge { display: inline-block; font-family: var(--font-latin); font-size: 1.3rem; font-weight: 700; letter-spacing: 2px; padding: 5px 16px; background: var(--paper); border: 1.5px solid var(--rule-strong); border-radius: 3px; color: var(--ink); } /* ✦区切り */ .m-divider-orn { text-align: center; color: var(--gold-ink); margin: 2em 0; font-size: 1.4rem; } .m-divider-orn::before { content: var(--ornament); } /* チップ */ .m-chip { display: inline-block; font-size: 1.3rem; font-weight: 700; color: var(--ink-soft); border: 1.5px dashed var(--rule-dash); border-radius: 999px; padding: 3px 14px; } /* 藍の反転カード */ .m-card-ink { background: radial-gradient(ellipse at 50% -30%, rgba(201,167,63,.15), transparent 55%), var(--indigo-deep); color: #e9e0c8; border: 1.5px solid var(--ink); border-radius: 3px; padding: 24px 20px; } /* エピグラフ（小さな欧文ラベル） */ .m-epigraph { font-family: var(--font-latin); color: var(--gold-ink); font-size: 1.3rem; font-weight: 700; letter-spacing: 6px; text-transform: uppercase; text-align: center; } /* ============================================================ 12. ヒーロー（トップ用・frame基調＋天体装飾） フリーエリア（Custom HTMLウィジェット）に専用HTMLを貼って使う。 すべて .m-hero 配下にスコープ（賢威の .frame/.card/.corner と非衝突）。 ============================================================ */ /* ヒーローを置いたウィジェットだけ「紙カードの地」を消す。 賢威は各ウィジェットを .keni-section_wrap（紙地）で包むため、 .m-hero を含むラッパーのみ背景・余白を無効化し、ヒーロー自身の額装だけ見せる。 （:has() は現行ブラウザで広くサポート） */ .keni-section_wrap:has(.m-hero) { background: transparent; padding: 0; margin: 0; border: 0; box-shadow: none; } .keni-section_wrap:has(.m-hero) > .keni-section { padding: 0; } .m-hero { position: relative; max-width: 1080px; margin: 8px auto 24px; padding: clamp(28px,5vw,56px) clamp(18px,4vw,48px) clamp(28px,4vw,40px); background: linear-gradient(170deg, var(--paper), #f3ecd8 70%, var(--paper-edge)); border: 1.5px solid var(--rule-strong); outline: 1px solid rgba(62,51,34,.22); outline-offset: 8px; box-shadow: 0 0 0 6px rgba(169,133,47,.18), 0 26px 60px rgba(60,45,20,.30); overflow: hidden; text-align: center; } /* 地紋（ブラックレターの判読できない手書き文字）を背面に。 コンテンツは前面へ（地紋＝z0、本文＝z1、四隅✦＝z4）。 */ .m-hero > *:not(.m-hero__script) { position: relative; z-index: 1; } .m-hero__script { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; font-family: 'Pirata One', cursive; color: #5e4124; /* 褪せた焦茶 */ opacity: .20; /* 控えめ（気づく程度） */ font-size: 16px; line-height: 1.55; letter-spacing: .3px; padding: 34px 46px; white-space: pre-wrap; overflow: hidden; text-align: left; -webkit-mask: radial-gradient(ellipse 80% 75% at 50% 45%, #000 8%, transparent 80%); mask: radial-gradient(ellipse 80% 75% at 50% 45%, #000 8%, transparent 80%); } /* 四隅の✦飾り罫 */ .m-hero__corner { position:absolute; width:46px; height:46px; border:2.5px solid var(--gold); z-index:4; } .m-hero__corner::after { content:"\2726"; position:absolute; color:var(--gold); font-size:15px; line-height:1; } .m-hero__corner.tl { top:14px; left:14px; border-right:none; border-bottom:none; } .m-hero__corner.tl::after { top:-8px; left:-8px; } .m-hero__corner.tr { top:14px; right:14px; border-left:none; border-bottom:none; } .m-hero__corner.tr::after { top:-8px; right:-8px; } .m-hero__corner.bl { bottom:14px; left:14px; border-right:none; border-top:none; } .m-hero__corner.bl::after { bottom:-8px; left:-8px; } .m-hero__corner.br { bottom:14px; right:14px; border-left:none; border-top:none; } .m-hero__corner.br::after { bottom:-8px; right:-8px; } /* 天体ヘッダー（金の放射光線＋中心の天球＋✦星） */ .m-hero__celestial { position:relative; height:clamp(110px,16vw,176px); display:flex; align-items:center; justify-content:center; margin-bottom:6px; } .m-hero__rays { position:absolute; inset:0; z-index:0; pointer-events:none; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(169,133,47,.20) 0deg 1.6deg, transparent 1.6deg 13deg); -webkit-mask: radial-gradient(circle at 50% 50%, #000 3%, transparent 56%); mask: radial-gradient(circle at 50% 50%, #000 3%, transparent 56%); } .m-hero__sun { position:relative; z-index:1; width:54px; height:54px; border-radius:50%; background: radial-gradient(circle at 38% 32%, #f4e6b4 0%, #c9a73f 40%, #8a6a23 80%); box-shadow: 0 0 0 3px rgba(169,133,47,.35), 0 0 26px rgba(201,167,63,.5); } /* 金の六芒星（2つの三角形＝star-hex）。インラインSVG、色は currentColor */ .m-hero__star { position:absolute; z-index:0; color:var(--gold-bright); fill:currentColor; filter: drop-shadow(0 0 3px rgba(201,167,63,.45)); } /* テキスト */ .m-hero__epigraph { font-family:var(--font-latin); color:var(--gold-ink); font-weight:700; letter-spacing:6px; text-transform:uppercase; font-size:clamp(11px,1.4vw,15px); margin-bottom:14px; } .m-hero__title { font-family:var(--font-head); color:var(--ink); font-weight:800; line-height:1.45; letter-spacing:1px; font-size:clamp(26px,5vw,46px); margin:0 0 14px; } .m-hero__title .accent { color:var(--indigo); } .m-hero__sub { color:var(--ink-soft); font-weight:600; letter-spacing:2px; font-size:clamp(14px,2vw,20px); } /* サファイアのジュエル区切り */ .m-hero__orbs { display:flex; align-items:center; justify-content:center; gap:14px; margin:22px 0 6px; } .m-hero__orbs .seg { height:1.5px; width:clamp(40px,10vw,90px); background:linear-gradient(90deg,transparent,var(--gold)); } .m-hero__orbs .seg.r { transform:scaleX(-1); } .m-hero__orb { display:inline-block; width:20px; height:20px; border-radius:50%; position:relative; vertical-align:middle; background: radial-gradient(circle at 35% 30%, #acc0ec 0%, #425793 36%, #1d2746 78%); box-shadow: 0 0 0 2px rgba(169,133,47,.55), 0 2px 5px rgba(20,25,50,.45), inset 0 -2px 4px rgba(10,14,35,.6); } .m-hero__orb::after { content:""; position:absolute; top:16%; left:22%; width:32%; height:32%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%); } .m-hero__orb.sm { width:12px; height:12px; } .m-hero__orb.lg { width:30px; height:30px; } /* 3本柱 */ .m-hero__pillars { display:flex; gap:16px; margin-top:28px; text-align:center; flex-wrap:wrap; } .m-hero__pillar { flex:1 1 160px; background:var(--paper); border:1.5px solid var(--rule); border-radius:3px; padding:22px 16px 18px; position:relative; box-shadow:var(--shadow-card); } .m-hero__pillar h3 { border:0; margin:0 0 6px; padding:0; font-size:1.9rem; } .m-hero__pillar p { color:var(--ink-soft); font-weight:600; font-size:1.4rem; margin:0; } .m-hero__pillar .pdot { display:flex; justify-content:center; margin-bottom:10px; } /* CTA */ .m-hero__cta { margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* 封蝋（楓のシール）＋締めの一行 */ .m-hero__foot { margin-top:32px; } .m-hero__seal { width:88px; height:88px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; position:relative; border-radius:46% 54% 51% 49% / 52% 47% 53% 48%; background: radial-gradient(circle at 38% 30%, #c75744 0%, #b23a28 42%, #8a2618 80%, #6f1d12 100%); box-shadow: inset 0 -5px 11px rgba(70,15,8,.55), inset 0 4px 8px rgba(255,205,185,.22), 0 5px 12px rgba(60,20,12,.42); } .m-hero__seal::before { content:""; position:absolute; inset:9px; border-radius:50%; border:1.5px solid rgba(120,30,18,.40); } .m-hero__seal .emblem { font-size:54px; line-height:1; position:relative; z-index:1; filter: brightness(0) drop-shadow(0 1.6px 0 rgba(255,228,212,.5)); opacity:.32; } .m-hero__tagline { font-family:var(--font-head); color:var(--ink); font-weight:800; letter-spacing:3px; font-size:1.9rem; display:flex; align-items:center; justify-content:center; gap:14px; } .m-hero__tagline::before, .m-hero__tagline::after { content:"\2726"; color:var(--gold); font-size:13px; } @media (max-width:600px){ .m-hero__corner { width:34px; height:34px; } .m-hero__pillars { gap:10px; } }