/* ============================================================================ FOUR WINDS MINISTRY — components.css Reusable component primitives. Requires colors_and_type.css. ============================================================================ */ /* ---- Buttons -------------------------------------------------------------- Square-ish, confident, streetwear. Default radius is small (not pill) to match the gritty/utility feel; .fw-btn--pill available for softer contexts. */ .fw-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-display);font-weight:800;font-size:14px; letter-spacing:.08em;text-transform:uppercase; padding:14px 26px;border-radius:var(--radius-sm);border:2px solid transparent; cursor:pointer;text-decoration:none;line-height:1; transition:transform .12s ease, background-color .15s ease, color .15s ease, opacity .15s ease, backdrop-filter .15s ease; -webkit-tap-highlight-color:transparent; } .fw-btn:active{transform:translateY(1px) scale(.99);} .fw-btn--primary{background:var(--flare);color:var(--day);} .fw-btn--primary:hover{background:#e23f0f;} .fw-btn--dark{background:var(--night);color:var(--day);} .fw-btn--dark:hover{background:var(--shadow);} .fw-btn--ghost{background:transparent;color:var(--fg);border-color:var(--night);} .fw-btn--ghost:hover{background:var(--night);color:var(--day);} .fw-btn--foam{background:var(--sea-foam);color:var(--moss);} .fw-btn--foam:hover{background:var(--foam);color:var(--day);} .fw-btn--pill{border-radius:var(--radius-pill);} .fw-btn--sm{padding:9px 16px;font-size:12px;} .fw-btn--lg{padding:18px 34px;font-size:16px;} /* Glass hover — frosted, translucent fill on hover. Stack onto any button (best on light-text variants: --primary / --dark / --foam-hover / --ghost-hover). On hover the button's own fill gives way to a blurred warm-grey scrim. */ .fw-btn--glass:hover{ background-color:#9690907a; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--day); } .fw-btn--glass.fw-btn--ghost{border-color:transparent;} /* Icons inside buttons: the base .fw-btn is already inline-flex with gap, so a leading or trailing just works. These tune size + optics. */ .fw-btn .ph,.fw-btn [class^="ph-"]{font-size:1.15em;line-height:0;} .fw-btn--sm .ph,.fw-btn--sm [class^="ph-"]{font-size:1.05em;} .fw-btn--lg .ph,.fw-btn--lg [class^="ph-"]{font-size:1.25em;} /* nudge optical balance when an icon leads/trails text */ .fw-btn--icon-l{padding-left:20px;} .fw-btn--icon-r{padding-right:20px;} /* Icon-only square button — equal padding, 1:1 footprint */ .fw-btn--icon{padding:13px;aspect-ratio:1/1;} .fw-btn--icon .ph,.fw-btn--icon [class^="ph-"]{font-size:1.35em;} .fw-btn--icon.fw-btn--sm{padding:9px;} .fw-btn--icon.fw-btn--lg{padding:17px;} .fw-btn--icon.fw-btn--pill{border-radius:var(--radius-pill);} /* ---- Tags / badges -------------------------------------------------------- */ .fw-tag{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-display);font-weight:800;font-size:11px; letter-spacing:.14em;text-transform:uppercase; padding:6px 12px;border-radius:var(--radius-pill); background:var(--night);color:var(--day);line-height:1; } .fw-tag--foam{background:var(--sea-foam);color:var(--moss);} .fw-tag--flare{background:var(--flare);color:var(--day);} .fw-tag--outline{background:transparent;color:var(--fg);border:1.5px solid var(--night);} .fw-tag--gold{background:var(--golden-hour);color:var(--night);} /* ---- Inputs --------------------------------------------------------------- */ .fw-field{display:flex;flex-direction:column;gap:7px;} .fw-field > label{ font-family:var(--font-display);font-weight:800;font-size:11px; letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2); } .fw-input,.fw-select,.fw-textarea{ font-family:var(--font-body);font-size:16px;color:var(--fg); background:var(--day);border:1.5px solid var(--border);border-radius:var(--radius-sm); padding:13px 15px;outline:none;width:100%;box-sizing:border-box; transition:border-color .15s ease, box-shadow .15s ease; } .fw-input::placeholder{color:var(--fg-3);} /* Select: custom chevron with breathing room on the right */ .fw-select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23797979' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .fw-input:focus,.fw-select:focus,.fw-textarea:focus{ border-color:var(--flare);box-shadow:0 0 0 3px rgba(254,88,36,0.18); } /* ---- Card ----------------------------------------------------------------- */ .fw-card{ background:var(--day);border:1.5px solid var(--border-on-light);border-radius:var(--radius-md); padding:var(--space-5); } .fw-card--soft{border:1px solid var(--line);box-shadow:var(--elev-2);} .fw-card--kraft{background:var(--bg-kraft);border-color:var(--night);} .fw-card--dark{background:var(--shadow);border-color:var(--shadow);color:var(--fg-inverse);} .fw-card--white{background:var(--white);border-color:var(--border-on-light);} .fw-card--foam{background:var(--foam);border-color:var(--foam);color:var(--foam-deep);} .fw-card--flare{background:var(--flare);border-color:var(--flare);color:var(--day);} .fw-card--sunshine{background:var(--sunshine);border-color:var(--sunshine);color:var(--sunshine-deep);} .fw-card--sea-foam{background:var(--sea-foam);border-color:var(--sea-foam);color:var(--sea-foam-deep);} .fw-card--sky{background:var(--sky);border-color:var(--sky);color:var(--sky-deep);} .fw-card--golden-hour{background:var(--golden-hour);border-color:var(--golden-hour);color:var(--golden-hour-deep);} .fw-card--shore{background:var(--shore);border-color:var(--shore);color:var(--shore-deep);} /* Fully-clickable card — wrap the entire card in an or